Руководство по Event Listeners в JavaScript

События прослушиваний (Listeners) аналогичны обработчикам событий, за исключением того, что вы можете назначить столько event Listeners, сколько вам нужно для конкретного события в конкретном элементе.

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

<button id="myBtn">Click Me</button>
 
<script>
// Определение пользовательских функций
function firstFunction() {
    alert("Первая функция выполнена успешно!");
}
 
function secondFunction() {
    alert("Вторая функция выполнена успешно");
}
 
// Выбираем элемент кнопки
var btn = document.getElementById("myBtn");
 
// Назначаем обработчик событий кнопке
btn.onclick = firstFunction;
btn.onclick = secondFunction; // Это перезаписывает первый
</script>

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

Это главный недостаток классической модели событий — вы можете назначить только один обработчик для определенного события в конкретном элементе, то есть одну функцию для каждого события в каждом элементе. Для решения этой проблемы W3C представил более гибкую модель событий, называемую «слушателями событий» (event listeners).

Любой HTML-элемент может иметь несколько Listeners, поэтому вы можете назначить несколько функций одному и тому же событию для одного и того же элемента, как показано в следующем примере:

<button id="myBtn">Click Me</button>
 
<script>
// Определение пользовательских функций
function firstFunction() {
    alert("Первая функция выполнена успешно!");
}
 
function secondFunction() {
    alert("Вторая функция выполнена успешно");
}
 
// Выбираем элемент кнопки
var btn = document.getElementById("myBtn");
 
// Назначаем event Listener событий на кнопку
btn.addEventListener("click", firstFunction);
btn.addEventListener("click", secondFunction);
</script>

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

В дополнение к типу события и параметру функции addEventListener() принимает еще один логический параметр useCapture. Это необязательный параметр, который указывает, следует ли использовать всплывающее окно или захват события. Его основной синтаксис:

target.addEventListener(event, function, useCapture);

Подробнее о распространении событий (event propagation) мы поговорим в следующей главе.

Добавление Listeners для разных типов событий

Как и обработчик событий, вы можете назначать разные event listeners разным типам событий для одного и того же элемента. В следующем примере будут назначены различные функции event-listener для событий click, mouseover и mouseout элемента кнопки.

<button id="myBtn">Click Me</button>
 
<script>
// Выбираем элемент кнопки
var btn = document.getElementById("myBtn");
 
// Определяем пользовательские функции
function sayHello() {
    alert("Hi, how are you doing?");
}
 
function setHoverColor() {
    btn.style.background = "yellow";
}
 
function setNormalColor() {
    btn.style.background = "";
}
 
// Назначаем event Listener событий на кнопку
btn.addEventListener("click", sayHello);
btn.addEventListener("mouseover", setHoverColor);
btn.addEventListener("mouseout", setNormalColor);
</script>

Добавление Listeners в объект Window

Метод addEventListener() позволяет добавлять Listeners к любым элементам HTML DOM, объекту document, объекту window или любому другому объекту, поддерживающему события, например объекту XMLHttpRequest. Вот пример, который добавляет Listener к окну события «изменить размер»:

<div id="result"></div>
 
<script>
// Определяем функцию для Listener
function displayWindowSize() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    var size = "Width: " + w + ", " + "Height: " + h;
    document.getElementById("result").innerHTML = size;
}
 
// Добавляем функции event Listener к событию изменения размера окна
window.addEventListener("resize", displayWindowSize);
</script>

Удаление события Listeners

Вы можете использовать метод removeEventListener(), чтобы удалить Listener, который был ранее добавлен с помощью addEventListener(). Вот пример:

<button id="myBtn">Click Me</button>
 
<script> 
// Определяем функцию
function greetWorld() {
    alert("Hello World!");
}
 
// Выбираем элемент кнопку
var btn = document.getElementById("myBtn");
 
// Прикрепляем event  Listener
btn.addEventListener("click", greetWorld);
 
// Удаляем event listener
btn.removeEventListener("click", greetWorld);
</script>