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

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

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

← →
↑
en ru