мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Добавление обработчиков событий в цикле

Давайте теперь научимся массово добавлять обработчики событий элементам.

Пусть, к примеру, у нас есть абзацы:

<p>text1</p> <p>text2</p> <p>text3</p>

Пусть у нас также есть функция:

function func() { alert('!'); }

Давайте переберем наши абзацы в цикле и каждому абзацу добавим в качестве обработчика клика функцию func:

let elems = document.querySelectorAll('p'); for (let elem of elems) { elem.addEventListener('click', func); }

Усложним

Давайте пойдем дальше и сделаем так, чтобы по клику на любой абзац алертом выводился текст этого абзаца. Есть, однако, проблема: абзацев много, а функция-обработчик одна. Как же нам отличить наши абзацы внутри функции-обработчика?

В этом нам поможет объект this - при вызове функции в момент события этот объект будет указывать на тот элемент, где это событие случилось. Переделаем код нашей функции func в соответствии со сказанным:

function func() { alert(this.innerHTML); // выводим текст абзаца }

Дана следующая функция:

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

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

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

Анонимные функции как обработчики событий

В примере выше в качестве функции-обработчика мы использовали Function Declaration.

Можно, конечно же, использовать и анонимные функции. Это делает код более компактным и избавляет нас от придумывания имени для функции, которая используется только в одном месте.

Давайте перепишем приведенный выше код через анонимную функцию:

let elems = document.querySelectorAll('p'); for (let elem of elems) { elem.addEventListener('click', function() { alert(this.innerHTML); }); }

Дан следующий код:

<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> let divs = document.querySelectorAll('div'); for (let div of divs) { div.addEventListener('click', func); } function func() { this.innerHTML++; }

Сделайте функцию-обработчик анонимной.