JavaScript да циклида ишлайдиган вокеалар ишловчиларини боглаб куйиш

Энди бизда битта элемент эмас, бир нечта элементлар бор деб фараз қилайлик. Масалан, бир нечта абзацлар:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Келинг, ушбу абзацларнинг ҳар бирига клик вокеаси ишловчиси орқали func функциясини боглаймиз:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
}

Энди кодни қайтадан ясайлик, щунда ҳар бир абзац фақат унинг биринчи боскичига жавоб берсин. Буни амалга ошириш учун абзац устида босилганда уңга богланган ишловчини боглаб куямиз. Бу ҳолда боглаб куйищ фақат мана щу абзац учун амал қилади, қолганларига таъсир кўрсатмайди.

Сиз биласизки, вокеа юз берган элементни функция-ишловчи ичида this орқали олиш мумкин. Демак, ишловчини this дан боглаб куйиш керак, мана щундай:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // ишловчини боглаб куямиз
}

Абзацлар берилган. Ҳар қандай абзац устида босилганда унинг охирига undov белгиси қўшинг. Бу қўшищ фақат биринчи босилганда юз беришини таъминланг.