Додавање на обработувачи во циклус во 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); // го печатиме текстот на параграфот
}

Дадена е следнава функција:

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

Дадени се и input полиња. Направете така што при загуба на фокусот во кое било од нашите input полиња ќе се изврши наведената функција.

Дадени се параграфи со броеви. Направете така што при клик на кој било параграф неговиот број во него ќе се подигне на квадрат.