Entrar Ainda não tem acesso?
1
resposta

Como o eventListener funciona?

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Remoção, Delegação e Animação e atividade Analisando o código

por Estudante
| 149.2k xp | 1 posts

Olá,

Após click do botão, chamo o querySelctor novamente. Mesmo assim, o evento de click não funciona para os <li> adicionados por Javascript. Não entendi o motivo desse novo lis não ser escutado pelo eventListener, sendo que se adiciono uma nova <li> e aperto em alguma <li> original, vejo pelo console que o lis passado para o for é o lis novo, com o novo<li> proveniente do botão.

botao.addEventListener('click',function() {

        var li = document.createElement('li');
        li.textContent = input.value;
        lista.appendChild(li);
        //nova lis com novo li
        let lis = document.querySelectorAll('li');
        console.log('nova lis')
        console.log(lis);
    });

Entendi que podemos "escutar eventos" no elemento pai e descobrir em que filho o evento ocorreu, mesmo se esse filho foi adicionado por Javascript:

var botao = document.querySelector("#botao");
var input = document.querySelector("#campo");
var lista = document.querySelector(".lista");
var lis = document.querySelectorAll("li");

botao.addEventListener("click", function () {
  var li = document.createElement("li");
  li.textContent = input.value;
  lista.appendChild(li);
  input.value="";
});
let paiDoLis = document.querySelector(".lista");

paiDoLis.addEventListener("click", function (evento) {
  alert(evento.target.textContent);
});
1 resposta
por Lorena Garcia
| 8286.1k xp | 12128 posts
Alura Scuba Team Suporte Educacional

Olá!

O eventListener é uma função que "escuta" eventos em um elemento HTML, como o clique em um botão, por exemplo. Quando um evento é disparado, a função associada a ele é executada.

No seu código, você adiciona um novo elemento <li> à lista quando o botão é clicado, mas o eventListener não "ouve" esse novo elemento. Isso acontece porque o eventListener é adicionado apenas aos elementos que existem no momento em que o código é executado.

Para que o novo elemento <li> também seja "escutado" pelo eventListener, você pode adicionar o eventListener ao elemento pai, no caso a lista, e verificar em qual filho o evento ocorreu. Isso é feito através da propriedade target do objeto evento.

Veja como ficaria o seu código com essa alteração:

botao.addEventListener('click',function() {

        var li = document.createElement('li');
        li.textContent = input.value;
        lista.appendChild(li);
        //nova lis com novo li
        let paiDoLis = document.querySelector(".lista");
        paiDoLis.addEventListener("click", function (evento) {
          if(evento.target.tagName === 'LI') {
            console.log(evento.target.textContent);
          }
        });
    });

Dessa forma, quando um elemento filho da lista for clicado, a função associada ao eventListener do elemento pai será executada e o target do objeto evento será o elemento <li> clicado.

Espero ter ajudado.

Um abraço e bons estudos.