Como o eventListener funciona? | JavaScript: programando na linguagem da web

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); });

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); });

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.

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