К одному элементу можно привязать сразу несколько функций. Давайте посмотрим на примере. Пусть у нас есть кнопка:
<input id="button" type="submit">
Пусть у нас есть две функции:
function func1() {
alert('1');
}
function func2() {
alert('2');
}
Получим ссылку на нашу кнопку в переменную:
let button = document.querySelector('#button');
А теперь давайте привяжем к нашей кнопке в качестве обработчиков клика и первую, и вторую функции:
button.addEventListener('click', func1);
button.addEventListener('click', func2);
Дан абзац:
<p id="elem">text</p>
Даны следующие функции:
function func1() {
alert('1');
}
function func2() {
alert('2');
}
function func3() {
alert('3');
}
Привяжите все эти функции к нашему абзацу.
Анонимные обработчики
Привязываемые функции, конечно же, могут быть и анонимными. Давайте, например, привяжем к нашей кнопке две анонимные функции:
button.addEventListener('click', function() {
alert('1');
});
button.addEventListener('click', function() {
alert('2');
});
Дана кнопка. Привяжите к ней три анонимных
обработчика двойного клика по ней. Пусть
первый обработчик выводит число 1
,
второй обработчик - число 2
, а третий
- число 3
.