JavaScript-те циклде өңдеушілерді қосу

Енді элементтерге оқиға өңдеушілерін жалпылап қосуды үйренейік. Мысалы, бізде мынадай абзацтар болсын:

<p>мәтін1</p>
<p>мәтін2</p>
<p>мәтін3</p>

Бізде мынадай функция да болсын:

function func() {
	console.log('!');
}

Абзацтарды циклде айналып өтіп, әрбір абзацқа func функциясын басу оқиғасының өңдеушісі ретінде қосамыз:

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

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

Енді әрбір абзацқа басқанда сол абзацтың мәтіні шығарылатын етіп жасайық. Алайда, мәселе мынада: абзац көп, ал функция-өңдеуші бір. Функция-өңдеушінің ішінде абзацтарды бір-бірінен қалай ажыратамыз?

Бұл жерде бізге this объектісі көмектеседі - оқиға орын алған кезде функция шақырылғанда, бұл объект сол элементке сілтеме жасайды, онда оқиға орын алды. func функциямыздың кодін қайта жазайық:

function func() {
	console.log(this.textContent); // абзац мәтінін шығару
}

Мына функция берілген:

function func() {
	this.value = Number(this.value) + 1;
}

Сондай-ақ инпуттар берілген. Кез келген инпуттан focus жоғалтқан кезде жоғарыда көрсетілген функция орындалатын етіп жасаңыз.

Сандары бар абзацтар берілген. Кез келген абзацқа басқанда ондағы сан квадратқа шығарылатын етіп жасаңыз.