DOM - Метод addEventListener

Добавим обработчик события, который срабатывает при нажатии пользователем на кнопку:

document.getElementById("myBtn").addEventListener("click", displayDate); 

Метод addEventListener() присоединяет обработчик события к определенному элементу. При этом новый обработчик события не переписывает уже существующие обработчики событий.

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

Вы можете добавлять обработчики событий к любому объекту DOM, а не только к HTML элементам, например, к объекту окна.

Метод addEventListener() позволяет легко контролировать то, как обработчик реагирует на, так называемое, "всплывание" события.

Когда используется метод addEventListener(), JavaScript отделяется от разметки HTML, что улучшает читаемость скрипта и позволяет добавлять обработчики событий даже тогда, когда вы не можете контролировать разметку HTML.

Чтобы удалить обработчик события, нужно воспользоваться методом removeEventListener().

Синтаксис:

Первый параметр — тип события (например, "click" или "mousedown").

Второй параметр — функция, которая будет вызываться при возникновении события.

Третий параметр — логическое значение (true/false), определяющее следует ли отправить событие дальше ("всплывание") или нужно закрыть это событие. Этот параметр необязателен.

Обратите внимание, что в имени события не используется префикс "on" — "click" вместо "onclick".

В следующем примере при нажатии пользователем на элемент появляется окно с сообщением "Hello World!":

элемент.addEventListener("click", function(){ alert("Hello World!"); }); 

Также, можно задать и внешнюю "именованную" функцию:

элемент.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
} 

Метод addEventListener() позволяет добавлять несколько обработчиков событий к одному и тому же элементу не переписывая уже существующие обработчики событий:

элемент.addEventListener("click", myFunction);
элемент.addEventListener("click", mySecondFunction);

Также, можно добавлять обработчики событий разных типов:

элемент.addEventListener("mouseover", myFunction);
элемент.addEventListener("click", mySecondFunction);
элемент.addEventListener("mouseout", myThirdFunction); 

Добавление обработчика событий к объекту window

Метод addEventListener() позволяет добавлять обработчики событий к любому объекту HTML DOM — HTML элементам, HTML документу, объекту окна (объект window) и другим объектам, поддерживающим события как объект xmlHttpRequest.

В следующем примере добавляется обработчик события, который срабатывает, когда пользователь изменяет размер окна браузера:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = "какой-то текст";
}); 

Передача параметров

Если необходимо передать параметры, то используйте "анонимную" функцию, которая вызывает специализированную функцию с параметрами:

элемент.addEventListener("click", function(){ myFunction(p1, p2); }); 

Всплытие или перехват события?

В HTML DOM существует два способа распространения события — всплытие и перехват.

Распространение события — это последовательность обработки события HTML элементами. Если у вас есть элемент <p>, вложенный в элемент <div>, и пользователь мышкой нажимает на элемент <p>, то какой элемент должен обработать событие "click" первым?

При всплытии первым обрабатывает событие самый вложенный элемент, затем его родитель и т.д.: таким образом сначала обрабатывать событие "click" будет элемент <p>, а затем элемент <div>.

При перехвате все происходит наоборот — сначала событие обрабатывает самый внешний элемент, в нашем случае <div>, а затем вложенный, т. е. элемент <p>.

Метод addEventListener() позволяет задавать тип распространения события. Это можно сделать при помощи параметра "useCapture":

По умолчанию этот параметр имеет значение false, что задает всплытие события. Если задать ему значение true, то будет использоваться перехват.

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true); 

Метод removeEventListener()

Метод removeEventListener() удаляет обработчик события, подключенный методом addEventListener():

элемент.removeEventListener("mousemove", myFunction); 

Поддержка браузерами

Методы addEventListener() и removeEventListener() в настоящее время поддерживаются всеми основными браузерами.

Однако, IE 8 и более ранних версий, а также Opera 6.0 и более ранних версий не поддерживают методы addEventListener() и removeEventListener(). Тем не менее, для этих версий браузеров можно использовать метод attachEvent() для прикрепления обработчика события и метод detachEvent() для его удаления:

Пример кросс-браузерного решения:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // для всех основных браузеров
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // для IE 8 и более ранних версий
    x.attachEvent("onclick", myFunction);
}