Preciso de uma ajuda para entender como funciona o querySelector
e o querySelectorAll
, estou acostuma a usar os seletores do jquery com o $()
, mas, quando eu uso o querySelector
ele me retorna apenas o primeiro elemento e se eu usar o querySelectorAll
eu não consigo adicionar eventos, então como eu faço para ter o mesmo efeito que um seletor do jquery usando javascript puro?
-
depois de utilizar document.querySelectorAll(selectors), Acho que pra adicionar evento com essas elementos deve adicionar addEventListener(), em um for...– Natan Barros13/12/2019 às 12:39
-
4Possível duplicata de: Javascript função quando clicar em qualquer class=“xpto” e/ou Como adicionar um evento a todos elementos com a mesma classe?– Luiz Felipe13/12/2019 às 13:03
1 Resposta
Primeiramente querySelector
e querySelectorAll
são diferentes. O querySelector
retorna o primeiro elemento dentro do documento e querySelectorAll
retorna uma lista de elementos presentes no documento.
A forma para adicionar eventos usando javascript puro é usando o addEventListener
. O addEventListiner
deve receber dois parâmetros, primeiro o tipo do evento e segundo a ação que deve executar quando ocorrer aquele evento.
document.querySelector("button").addEventListener("click", function(){
alert("Olá")
});
<button>Click</button>
No Exemplo acima, selecionamos um botão, quando hover um click
(que o evento que esperamos), vamos executar uma função que inicia um alert
.
document.querySelectorAll("button").forEach(function(btn) {
btn.addEventListener("click", function(){
alert("Agora com QuerySelectorAll");
});
});
<button>Click</button>
<button>Click</button>
Para você aplicar o addEventListener
em uma lista de elementos você deve interar esta lista, podendo faz isto com um foreach
.
-
Mas e se eu usar o
querySelectorAll
para aplicar oaddEventListner
em todos os elementos igual no jquery ? 13/12/2019 às 12:55