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:
<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:
list.addEventListener('click', function(event) {
let li = event.target.closest('li');
if (li) {
li.innerHTML = li.innerHTML + '!';
}
});
Ulangi solusi yang diberikan.
