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:

list.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:

list.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:

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

Repita a solução apresentada. Certifique-se de que novos li também responderão ao clique.