JavaScriptda hodisalarni delegirlash

Oldingi darsda yangi elementlar qo'shilganda paydo bo'ladigan muammo tasvirlangan va uning yechimi keltirilgan. Ushbu darsda biz muammoni engishning yanada muvaffaqiyatli usulini ko'rib chiqamiz - hodisalarni delegirlash. Keling, buni tahlil qilaylik.

Ma'lumki, li ustiga bosganimizda, biz shu bilan birga ul ustiga ham bosamiz. Bu hodisalarning chiqishi tufayli mumkin. Biz buni o'z vazifamizni hal qilish uchun ishlatishimiz mumkin: har bir liga emas, balki ularning ota-onasi ulga hodisani qo'shamiz:

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

Endi this hodisalar ishlovchisida ishlovchi bog'langan elementni ko'rsatadi, event.target esa hodisa yuz bergan elementni ko'rsatadi:

list.addEventListener('click', function(event) {
	console.log(this);         // bizning ro'yxat
	console.log(event.target); // ro'yxat bandi
});

Keling, bosilgan lining oxiriga undov belgisi qo'shilishini ta'minlaymiz:

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

Keltirilgan yechimni takrorlang. Yangi lilar ham bosishga javob berishini tekshiring.