Добавление обработчиков в цикле в 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;
}

Даны также инпуты. Сделайте так, чтобы по потери фокуса в любом из наших инпутов выполнялась приведенная выше функция.

Даны абзацы с числами. Сделайте так, чтобы по клику на любой абзац его число в нем возводилось в квадрат.