Event Delegation in JavaScript

In der vorherigen Lektion wurde das Problem beschrieben, das beim Hinzufügen neuer Elemente auftritt, und dessen Lösung vorgestellt. In dieser Lektion werden wir eine bessere Methode betrachten, um das Problem zu umgehen - Event Delegation. Lassen Sie uns diese analysieren.

Wie Sie bereits wissen, klicken wir auf ein li, wir klicken gleichzeitig auch auf das ul. Dies ist möglich dank des Event Bubbling. Wir können dies nutzen, um unsere Aufgabe zu lösen: Wir hängen das Event nicht an jede li, sondern an deren Eltern-Element ul:

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

Nun wird im Event-Handler this auf das Element zeigen, an das der Handler gebunden ist, und event.target - auf das Element, in dem das Event stattgefunden hat:

javascriptlist.addEventListener('click', function(event) {
  console.log(this);         // unsere Liste
  console.log(event.target); // Listenpunkt
});

Lassen Sie uns bewirken, dass das li, auf das geklickt wurde, ein Ausrufezeichen am Ende hinzugefügt bekommt:

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