Добавяне на обработчици в цикъл в 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 полета да се изпълнява показаната по-горе функция.

Дадени са параграфи с числа. Направете така, че при кликване върху който и да е параграф числото в него да се повдига на квадрат.