JavaScriptda tsiklda hodisalar ishlovchilarini ajratish

Endi bizda bitta element emas, balki bir nechta elementlar bor deb faraz qilaylik. Masalan, bir nechta abzatslar:

<p>matn1</p>
<p>matn2</p>
<p>matn3</p>

Keling, ushbu abzatslarning har biriga func funktsiyasini bosish hodisasi ishlovchisi bilan bog'laymiz:

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

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

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

Keling, endi kodni shunday o'zgartiramizki, har bir abzats faqat unga birinchi marta bosilganda reagirlasin. Buning uchun abzatsga bosilganda undan bog'langan ishlovchini ajratamiz. Bunda ajratish faqat shu aniq abzatsdan amalga oshiriladi, qolganlariga ta'sir qilmaydi.

Bilganingizdek, hodisa yuz bergan elementni funktsiya-ishlovchida this orqali olish mumkin. Bu shuni anglatadiki, ishlovchini this dan ajratishni bajarish kerak, mana shu tarzda:

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

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

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // ishlovchini ajratamiz
}

Abzatslar berilgan. Istalgan abzatsga bosilganda uning oxiriga undov belgisini qo'shing. Buning faqat birinchi bosilishida sodir bo'lishini ta'minlang.