JavaScript'te Olay Temsilciliği

Önceki derste, yeni elemanlar eklendiğinde ortaya çıkan sorun açıklandı ve çözümü sunuldu. Bu derste, sorunu aşmak için daha iyi bir yol inceleyeceğiz - olay temsilciliği. Haydi bunu analiz edelim.

Bildiğiniz gibi, bir li'ye tıkladığımızda, aynı zamanda ul'ye de tıklamış oluruz. Bu, olayların kabarması (bubbling) sayesinde mümkündür. Bunu görevimizi çözmek için kullanabiliriz: olayı her bir li'ye değil, onların ebeveyni ul'ye ekleyeceğiz:

javascriptlist.addEventListener('click', function() {
  
});

Şimdi olay işleyicisinde this, işleyicinin bağlı olduğu elemanı gösterecek, event.target ise olayın gerçekleştiği elemanı gösterecek:

javascriptlist.addEventListener('click', function(event) {
  console.log(this);         // listemiz
  console.log(event.target); // liste öğesi
});

Tıklanan li'nin sonuna bir ünlem işareti eklenmesini sağlayalım:

javascriptlist.addEventListener('click', function(event) {
  event.target.textContent = event.target.textContent + '!';
});