AddEventListener и removeEventListener

Методы addEventListener и removeEventListener являются современным способом назначить или удалить обработчик, и при этом позволяют использовать сколько угодно любых обработчиков.

Назначение обработчика осуществляется вызовом addEventListener с тремя аргументами:

element.addEventListener(event, handler[, phase]);

· event — Имя события, например click

· handler — Ссылка на функцию, которую надо поставить обработчиком.

· phase — Необязательный аргумент, «фаза», на которой обработчик должен сработать. Этот аргумент редко нужен.

Удаление обработчика осуществляется вызовом removeEventListener:

// передать те же аргументы, что были у addEventListener

element.removeEventListener(event, handler[, phase]);

Удаление требует именно ту же функцию которая была назначена.

Вот так removeEventListener не сработает:

elem.addEventListener("click", function() {alert('Спасибо!')});

elem.removeEventListener("click", function() {alert('Спасибо!')});

В removeEventListener передана не та же функция, а другая, с одинаковым кодом, но это не важно.

Вот так правильно:

function handler() {

alert('Спасибо!');

}

input.addEventListener("click", handler);

input.removeEventListener("click", handler);

Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:

<input id="elem" type="button" value="Нажми меня"/>

<script>

function handler1() {

alert('Спасибо!');

};

function handler2() {

alert('Спасибо ещё раз!');

  }

elem.onclick = function() { alert("Привет"); };

elem.addEventListener("click", handler1); // Спасибо!

elem.addEventListener("click", handler2); // Спасибо ещё раз!

</script>

Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через addEventListener. Однако, во избежание путаницы, рекомендуется выбрать один способ.

AddEventListener работает всегда, а DOM-свойство – нет

У специальных методов есть ещё одно преимущество перед DOM-свойствами.

Есть некоторые события, которые нельзя назначить через DOM-свойство, но можно через addEventListener.

Например, таково событие transitionend, то есть окончание CSS-анимации. В большинстве браузеров оно требует назначения через addEventListener.

Итого по назначению событий

Есть три способа назначения обработчиков событий:

1. Атрибут HTML: onclick="...".

2. Свойство: elem.onclick = function.

3. Специальный метод: elem.addEventListener(событие, handler[, phase]), удаление через removeEventListener.

Объект события

Чтобы хорошо обработать событие, недостаточно знать о том, что это – «клик» или «нажатие клавиши». Могут понадобиться детали: координаты курсора, введённый символ и другие, в зависимости от события.

Детали произошедшего браузер записывает в «объект события», который передаётся первым аргументом в обработчик.

Свойства объекта события

Пример ниже демонстрирует использование объекта события:

<input type="button" value="Нажми меня" id="elem">

<script>

elem.onclick = function(event) {

alert(event.type + " на " + event.currentTarget); // вывести тип события и элемент

alert(event.clientX + ":" + event.clientY); // вывести координаты клика

}

</script>

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

<button id="btn">Кнопка</button>

<script>

let btn = document.getElementById('btn')

btn.onclick = function (event) {

 console.log(event);

 console.dir(event);

}

</script>

Объект события доступен и в HTML

При назначении обработчика в HTML, тоже можно использовать переменную event, это будет работать кросс-браузерно:

<input type="button" onclick="alert(event.type)" value="Тип события">

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) { alert(event.type) }. То есть, её первый аргумент называется "event".

Особенности IE8-

IE8- вместо передачи параметра обработчику создаёт глобальный объект window.event. Обработчик может обратиться к нему.

Работает это так:

elem.onclick = function() {

// window.event - объект события

alert(window.event.clientX);

};

Кроссбраузерное решение

Универсальное решение для получения объекта события:

element.onclick = function(event) {

event = event || window.event; // (*)

};

Строка (*), в случае, если функция не получила event (IE8-), использует window.event.-событие event.

Итого по объекту события

Объект события содержит ценную информацию о деталях события.

Он передается первым аргументом event в обработчик для всех браузеров, кроме IE8-, в которых используется глобальная переменная window.event.