Event Delegation

Definition

L'event delegation consiste a attacher un seul event listener sur un element parent plutot qu'un sur chaque enfant. On utilise event.target pour identifier quel enfant a declenche l'evenement.

Analogie

Un standard telephonique central : au lieu d'un telephone par bureau, un seul standard recoit tous les appels et les redirige.

Exemple de code

document.querySelector(class="str">'ul').addEventListener(class="str">'click', (e) => {
  if (e.target.matches(class="str">'li')) {
    console.log(class="str">'Item cliqué:', e.target.textContent);
  }
});

Cas d'usage

Gerer les clics sur une liste dynamique d'elements sans re-attacher des listeners a chaque ajout.