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:

list.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:

list.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:

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

Verilen çözümü tekrarlayın. Yeni li elemanlarının da tıklamalara tepki vereceğinden emin olun.