JavaScript'te Evrensel Olay Temsilciliği
Önceki derste verilen kod çalışıyor, ancak eksiklikleri yok değil. Bu eksiklikleri inceleyelim ve daha evrensel bir çözüm yazalım.
Kodumuzun eksikliği, li içinde
iç içe geçmiş etiketler olduğu durumda ortaya çıkacaktır.
Bizim durumumuzda bunlar i etiketleri olsun:
<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>
Bu durumda, i etiketine tıklanması,
i etiketinin sonuna ünlem işareti eklenmesine neden olacaktır,
li etiketine değil, çünkü
event.target içinde
olayın gerçekleştiği tam olarak o etiket bulunur.
Sorun, closest yöntemi kullanılarak çözülebilir:
list.addEventListener('click', function(event) {
let li = event.target.closest('li');
if (li) {
li.innerHTML = li.innerHTML + '!';
}
});
Verilen çözümü tekrarlayın.
