Добавим обработчик события, который срабатывает при нажатии пользователем на кнопку:
document.getElementById("myBtn").addEventListener("click", displayDate);
Метод addEventListener() присоединяет обработчик события к определенному элементу. При этом новый обработчик события не переписывает уже существующие обработчики событий.
Таким образом, вы можете добавлять сколько угодно обработчиков событий к одному элементу. При этом это могут быть обработчики событий одного типа, например, два события нажатия мышкой.
Вы можете добавлять обработчики событий к любому объекту DOM, а не только к HTML элементам, например, к объекту окна.
Метод addEventListener() позволяет легко контролировать то, как обработчик реагирует на, так называемое, "всплывание" события.
Когда используется метод addEventListener(), JavaScript отделяется от разметки HTML, что улучшает читаемость скрипта и позволяет добавлять обработчики событий даже тогда, когда вы не можете контролировать разметку HTML.
Чтобы удалить обработчик события, нужно воспользоваться методом removeEventListener().
Синтаксис:
элемент.addEventListener(событие, функция, useCapture);
Первый параметр — тип события (например, "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":
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() для его удаления:
элемент.attachEvent(событие, функция);
элемент.detachEvent(событие, функция);
Пример кросс-браузерного решения:
var x = document.getElementById("myBtn");
if (x.addEventListener) { // для всех основных браузеров
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // для IE 8 и более ранних версий
x.attachEvent("onclick", myFunction);
}