Давайте теперь научимся массово добавлять обработчики событий элементам. Пусть, к примеру, у нас есть абзацы:
<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++;
}
Сделайте функцию-обработчик анонимной.