Universelles Event-Delegation in JavaScript

Der im vorherigen Unterricht gezeigte Code ist funktionsfähig, jedoch nicht ohne Mängel. Lassen Sie uns diese Mängel besprechen und eine universellere Lösung schreiben.

Der Nachteil unseres Codes zeigt sich in dem Fall, wenn sich innerhalb von li verschachtelte Tags befinden. In unserem Fall sollen dies Tags i sein:

html<ul>
  <li>item <i>italic</i> item</li>
  <li>item <i>italic</i> item</li>
  <li>item <i>italic</i> item</li>
  <li>item <i>italic</i> item</li>
  <li>item <i>italic</i> item</li>
</ul>

In diesem Fall führt das Klicken auf den Tag i zum Hinzufügen eines Ausrufezeichens am Ende des Tags i, und nicht des Tags li, wie wir es wünschen würden - denn in event.target gelangt genau der Tag, in dem das Ereignis stattfand.

Das Problem kann mit der Methode closest gelöst werden:

javascriptlist.addEventListener('click', function(event) {
  let li = event.target.closest('li');
  
  if (li) {
    li.innerHTML = li.innerHTML + '!';
  }
});