JavaScript-də Hadisə Delegasiyası

Əvvəlki dərsdə yeni elementlər əlavə edilərkən yaranan problem təsvir edilmişdi və onun həlli göstərilmişdi. Bu dərsdə biz problemi aradan qaldırmaq üçün daha uyğun bir üsula nəzər salacağıq - hadisə delegasiyası. Gəlin onu araşdıraq.

Artıq bildiyiniz kimi, li üzərində klikləyəndə, eyni zamanda ul üzərində də klikləyirik. Bu, hadisələrin qalxması sayəsində mümkündür. Biz bunu öz vəzimiz üçün istifadə edə bilərik: hər bir li-yə yox, onların valideyni ul-ə hadisəni əlavə edək:

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

İndi hadisə işləyicisində this işləyicinin bağlandığı elementi göstərəcək, event.target isə - hadisənin baş verdiyi elementi:

list.addEventListener('click', function(event) {
	console.log(this);         // bizim siyahımız
	console.log(event.target); // siyahı bəndi
});

Gəlin elə edək ki, kliklənən li elementinin məzmununun sonuna nida işarəsi əlavə olunsun:

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

Göstərilən həllı təkrar edin. Əmin olun ki, yeni li elementləri də klikə reaksiya verir.