Delegação de Eventos em JavaScript

Na lição anterior, foi descrito um problema que surge ao adicionar novos elementos, e sua solução foi apresentada. Nesta lição, consideraremos uma maneira melhor de contornar o problema - delegação de eventos. Vamos analisá-la.

Como você já sabe, ao clicar em um li, nós simultaneamente clicamos no ul. Isto é possível graças à propagação (bubbling) de eventos. Podemos usar isso para resolver nossa tarefa: vamos anexar o evento não a cada li, mas ao seu pai ul:

javascriptlist.addEventListener('click', function() {
  
});

Agora, no manipulador de eventos, this irá se referir ao elemento ao qual o manipulador está vinculado, e event.target - ao elemento onde o evento ocorreu:

javascriptlist.addEventListener('click', function(event) {
  console.log(this);         // nossa lista
  console.log(event.target); // o item da lista
});

Vamos fazer com que o li no qual o clique ocorreu adicione um ponto de exclamação ao final do seu texto:

javascriptlist.addEventListener('click', function(event) {
  event.target.textContent = event.target.textContent + '!';
});