Обработчики событий

Свойства обработчиков событий

Подобно тому, как у html-элементов есть атрибуты для обработчиков, так и в коде javascript у элементов DOM мы можем получить свойства обработчиков, которые соответствуют атрибутам:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#rect{
width:50px;
height:50px;
background-color:blue;
}
</style>
</head>
<body>
<div id="rect"></div>
<script>
function handler(e){
alert(e.type);
}
document.getElementById("rect").onclick = handler;
</script>
</body>
</html>

В итоге нам достаточно взять свойство onclick и присвоить ему функцию, используемую в качестве обработчика. Стоит отметить, в обработчик события браузер автоматически передает объект Event, хранящий всю информацию о событии. Поэтому также мы можем получить этот объект в функции обработчика в качестве параметра.

Слушатели событий

Несмотря на то, что свойства обработчиков решают ряд проблем, которые связаны с использованием атрибутов, в то же время это также не оптимальный подход. Еще один способ установки обработчиков событий представляет использование слушателей.

Для работы со слушателями событий в JavaScript есть объект EventTarget, который определяет методы addEventListener() для добавления слушателя и removeEventListener()> для удаления слушателя. И поскольку html-элементы DOM тоже являются объектами EventTarget, то они также имеют эти методы. Фактически слушатели представляют те же функции обработчиков.

Метод addEventListener() принимает два параметра: название события без префикса on и функцию обработчика этого события:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#rect{
width:50px;
height:50px;
background-color:blue;
}
</style>
</head>
<body>
<div id="rect"></div>
<script>
var rect = document.getElementById("rect");
rect.addEventListener("click", function (e) {
alert(e.type);
});
</script>
</body>
</html>

То есть в данном случае опять же обрабатывается событие click. И также можно было бы в качестве второго параметра название функции:

function handler(e){
alert(e.type);
}
var rect = document.getElementById("rect");
rect.addEventListener("click", handler);

Удаление слушателя аналогично добавлению:

rect.removeEventListener("click", handler);

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

Примеры обработчиков событий с применением on

<div id="alert">Нажми меня</div>
//получаем элемент
var www = document.querySelector('#alert');
//вешаем событие onclick на элемент
www.onclick = function() {
alert('Вы кликнули на кнопку!');
}

//вешаем событие onclick на элемент
<div onclick="vuvod()">Нажми меня</div>
function vuvod() {
alert('Вы кликнули на кнопку!');
}

<div id="alert">Нажми меня</div>
//получаем элемент и вешаем событие
var www = document.querySelector('#alert').onclick = function() {
alert('Вы кликнули на кнопку!');
}

<button type="button">Кнопка 1</button>
<button type="button">Кнопка 2</button>
<button type="button">Кнопка 3</button>
// получим кнопки и сохраним ссылки на них в переменную $btns
const $btns = document.querySelectorAll('button');
// переберём кнопки и добавим к ним обработчик, используя onclick
$btns.forEach(function($element) {
$element.onclick = message;
});
//выполним функцию именно для той кнопки по которой был клик
function message() {
// this - обращаемся к кнопке для которой вызван обработчик
alert(this.textContent);
}

<div id="alert">Нажми меня</div>
//получаем элемент и вешаем событие onclick
var www = document.querySelector('#alert').onclick = modal;
function modal() {
alert('Вы кликнули на кнопку!');
}

Примеры обработчиков событий с применением addEventListener

Общий синтаксис:

element.addEventListener(event, handler, options);

event имя события, например click
handler функция, которая будет вызвана при возникновении события
options объект, в котором можно задать дополнительные параметры:
once если true, то обработчик будет вызван всего один раз
capture задаёт фазу на которой нужно вызвать обработчик события, по умолчанию - на этапе всплытия, если нужно на этапе погружения перехвата, то этому ключу следует установить значение true
passive определяет следует ли вызывать preventDefault(), если установить true тогда обработчик никогда не вызовет этот метод
options можно установить true или false, в этом случае он будет просто определять фазу, всплытие или погружение

<div id="alert">Нажми меня</div>
//получаем элемент
var www = document.querySelector('#alert');
//вешаем событие click
www.addEventListener('click', modal);
function modal() {
alert('Вы кликнули на кнопку!');
}

<div id="alert">Нажми меня</div
//получаем элемент
var www = document.querySelector('#alert');
//вешаем событие click
www.addEventListener('click', function modal() {
alert('Вы кликнули на кнопку!');
});

<div id="alert">Нажми меня</div
//получаем элемент и вешаем событие onclick
var www = document.querySelector('#alert').addEventListener('click', function modal() {
alert('Вы кликнули на кнопку!');
});

<button type="button">Кнопка 1</button>
<button type="button">Кнопка 2</button>
<button type="button">Кнопка 3</button>
// получим кнопки и сохраним ссылки на них в переменную $btns
const $btns = document.querySelectorAll('button');
// переберём кнопки и добавим к ним обработчик, используя onclick
$btns.forEach(function($element) {
$element.addEventListener('click', message);
});
//выполним функцию именно для той кнопки по которой был клик
function message() {
// this - обращаемся к кнопке для которой вызван обработчик
alert(this.textContent);
}