События прослушиваний (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>

Методы addEventListener() и removeEventListener() поддерживаются во всех основных браузерах. Не поддерживается в IE 8 и более ранних версиях, а также в Opera 6.0 и более ранних версиях.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 3 / 5. Количество оценок: 2

Оценок пока нет. Поставьте оценку первым.