Дадаванне апрацоўшчыкаў у цыкле ў JavaScript

Давайце цяпер навучымся масава дадаваць апрацоўшчыкі падзей элементам. Хай, напрыклад, у нас ёсць абзацы:

<p>text1</p>
<p>text2</p>
<p>text3</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); // выводiм тэкст абзаца
}

Дана наступная функцыя:

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

Даны таксама інпуты. Зрабіце так, каб па страце фокусу ў любым з нашых інпутаў выконвалася прыведзеная вышэй функцыя.

Даны абзацы з лікамі. Зрабіце так, каб па кліку на любы абзац яго лік у ім узводзіўся ў квадрат.