Delegasi Acara Universal di JavaScript

Kode yang diberikan dalam pelajaran sebelumnya memang berfungsi, namun, tidak tanpa kekurangan. Mari kita bahas kekurangan tersebut dan tulis solusi yang lebih universal.

Kekurangan kode kita akan muncul dalam kasus ketika di dalam li ada tag bersarang apa pun. Dalam kasus kita, misalkan tag i:

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>

Dalam hal ini, mengklik tag i akan menyebabkan penambahan tanda seru di akhir tag i, bukan tag li, seperti yang kita harapkan - karena event.target adalah tepat tag tempat acara terjadi.

Masalah ini dapat diselesaikan dengan metode closest:

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