First of all querySelector
and querySelectorAll
are different. The querySelector
returns the first element within the document and querySelectorAll
returns a list of elements present in the document.
The way to add events using pure javascript is by using the addEventListener
. The addEventListiner
must receive two parameters, first the type of the event and second the action that must be performed when that event occurs.
document.querySelector("button").addEventListener("click", function(){
alert("Olá")
});
<button>Click</button>
In the Example above, we select a button, when click
(that the event we expect), we will perform a function that starts a alert
.
document.querySelectorAll("button").forEach(function(btn) {
btn.addEventListener("click", function(){
alert("Agora com QuerySelectorAll");
});
});
<button>Click</button>
<button>Click</button>
For you to apply the addEventListener
in a list of elements you must interact this list, can do this with a foreach
.
after using Document.querySelectorAll(selectors), I think to add event with these elements should add addeventlistener(), in a for...
– Natan Barros
Possible duplicate of: Javascript function when clicking on any class="foo" and/or Adding an event to all elements with the same class?
– Luiz Felipe