Pendelegasian Peristiwa Sejagat dalam JavaScript

Kod yang diberikan dalam pelajaran sebelumnya berfungsi, namun, ia tidak tanpa kelemahan. Mari kita bincangkan kelemahan ini dan tulis penyelesaian yang lebih sejagat.

Kelemahan kod kita akan muncul dalam kes apabila terdapat sebarang tag bersarang di dalam li. Dalam kes ini, biarkan ia adalah 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 kes ini, mengklik pada tag i akan membawa kepada penambahan tanda seru pada akhir tag i, dan bukan tag li, seperti yang kita inginkan - kerana event.target menunjukkan tepat tag di mana peristiwa itu berlaku.

Masalah ini boleh diselesaikan dengan menggunakan kaedah closest:

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