JavaScriptда вокеаларни делегирование қилиш

Олдинги дарслиқда янги элементлар қўшганда юзага келадиган муаммо тавсифланган ва унинг ечими келтирилган эди. Ушбу дарслиқда биз муаммони чегиш учун янада яхшироқ усулни кўриб чиқамиз - вокеаларни делегирование қилиш. Келиб унии тахлил қилайлик.

Сиз биласиз, li ни босганда, биз бир вақтнинг ўзида ul ни ҳам босамиз. Бу вокеаларнинг кўтарилиши орқали имкон бўлади. Биз буни ўз вазифамизни ечиш учун ишлата оламиз: ҳар бир li га эмас, балки уларнинг ота-онаси ul га воқеани қўямиз:

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

Энди this воқеа ишловчисида ишловчи билан богланган элементни кўрсатади, event.target эса воқеа юз берган элементни кўрсатади:

list.addEventListener('click', function(event) {
	console.log(this);         // бизнинг рўйхат
	console.log(event.target); // рўйхат элементи
});

Келиб, босилган li нинг охирига ҳайқалдоқ белгиси қўшиладиган қилиб қўйайлик:

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

Келтирилган ечимни такрорланг. Янги li лар ҳам босилишга жавоб беришига ишонч ҳосил қилинг.