Delegación de eventos en JavaScript

En la lección anterior se describió el problema, que surge al agregar nuevos elementos, y se presentó su solución. En esta lección consideraremos una forma más adecuada de evitar el problema - delegación de eventos. Vamos a analizarlo.

Como ya sabes, al hacer clic en li, también hacemos clic en ul. Esto es posible gracias a la burbuja de eventos. Podemos usar esto para resolver nuestra tarea: asignaremos el evento no a cada li, sino a su padre ul:

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

Ahora en el manejador de eventos this apuntará al elemento al que está vinculado el manejador, y event.target - al elemento donde ocurrió el evento:

javascriptlist.addEventListener('click', function(event) {
  console.log(this);         // nuestra lista
  console.log(event.target); // elemento de la lista
});

Hagamos que el li en el que ocurrió el clic, añada un signo de exclamación al final:

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