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:

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

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

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