Event Bubbling heißt: Ereignisse steigen im Baum nach oben. Wer das kennt, kommt mit einem einzigen Listener für hundert Elemente aus.
- Event Bubbling
Die Eigenschaft der meisten Ereignisse, nach dem Auslösen die Kette der Vorfahren nach oben zu durchlaufen.
Beispiel: „Beim Event Bubbling erfährt auch das Elternelement von einem Klick.“
Die Delegation
liste.addEventListener('click', (e) => {
const eintrag = e.target.closest('li');
if (!eintrag) return;
// mit eintrag arbeiten
});Statt hundert Listener an hundert Einträge zu hängen, genügt einer an der Liste. Das spart Arbeit und wirkt auch für Einträge, die später dazukommen. e.target ist das tatsächlich getroffene Element, e.currentTarget jenes, an dem der Listener hängt.
Wenn es stört
Mit stopPropagation() lässt sich das Aufsteigen anhalten, etwa wenn ein Klick in einem Dialog nicht als Klick auf den Hintergrund gelten soll. Sparsam einsetzen: Ein angehaltenes Ereignis fehlt dann auch allen anderen Listenern weiter oben.