addEventListener() метод
пример
Добавить прослушиватель событий, что пожары, когда пользователь нажимает на кнопку:
document.getElementById("myBtn").addEventListener("click", displayDate); Попробуй сам " addEventListener() метод придает обработчик событий для указанного элемента.
addEventListener() метод придает обработчик событий к элементу без перезаписи существующих обработчиков событий.
Вы можете добавить много обработчиков событий к одному элементу.
Вы можете добавить множество обработчиков событий одного и того же типа к одному элементу, то есть два "click" событий.
Вы можете добавлять обработчики событий к любому DOM объекта не только HTML элементов. то есть объект окна.
addEventListener() метод позволяет легче контролировать , как событие реагирует на бульканье.
При использовании addEventListener() метод, то JavaScript отделена от HTML - разметки, для лучшей читаемости и позволяет добавлять обработчики событий , даже если вы не контролировать HTML - разметку.
Вы можете легко удалить слушатель события с помощью removeEventListener() метод.
Синтаксис
element .addEventListener( event, function, useCapture );Первым параметром является тип события (например , "click" или "mousedown" ).
Второй параметр является функцией мы хотим вызвать, когда происходит событие.
Третий параметр представляет собой логическое значение, определяющее, следует ли использовать восходящей цепочки события или захвата видео событий. Этот параметр является необязательным.
Обратите внимание , что вы не используете "on" префикс для события; использовать "click" вместо "onclick" .
Добавление обработчика событий к элементу
пример
Предупреждение "Hello World!" когда пользователь нажимает на элемент:
element .addEventListener("click", function(){ alert("Hello World!"); }); Попробуй сам " Вы также можете обратиться к внешней функции "под названием":
пример
Предупреждение "Hello World!" когда пользователь нажимает на элемент:
element .addEventListener("click",
myFunction);
function myFunction() {
alert ("Hello World!");
} Попробуй сам " Добавить много обработчиков событий к одному элементу
addEventListener() метод позволяет добавлять множество событий к одному элементу, без перезаписи существующих событий:
пример
element .addEventListener("click", myFunction);
element .addEventListener("click", mySecondFunction);
Попробуй сам " Вы можете добавлять события различных типов к одному элементу:
пример
element .addEventListener("mouseover", myFunction);
element .addEventListener("click", mySecondFunction);
element .addEventListener("mouseout", myThirdFunction); Попробуй сам " Добавление обработчика событий для объекта окна
addEventListener() метод позволяет добавлять обработчики событий на любой объект DOM HTML , такие как HTML - элементов, в HTML - документе, объект окна или других объектов , которые поддерживают события, как xmlHttpRequest объект.
пример
Добавить прослушиватель событий, что пожары, когда пользователь изменяет размер окна:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext ;
});
Попробуй сам " Передача параметров
При передаче значения параметров, используйте "анонимную функцию", которая вызывает указанную функцию с параметрами:
Событие Bubbling или перехвате событий?
Есть два способа распространения событий в HTML DOM, кипящий и захватывая.
Распространение событий является способ определения порядка элементов, когда происходит событие. Если у вас есть <p> элемента внутри <div> элемент, и пользователь нажимает на <p> элемента, элемента "click" событие должно быть обработано в первую очередь?
В кипящий событием Внутреннюю элемента обрабатывается первым , а затем внешний: The <p> событие щелчка элемента обрабатывается первым, то <div> событие щелчка элемента.
В захвате событий на самой внешней элемента обрабатывается первым , а затем внутренняя: в <div> событие щелчка элемента будет обрабатываться первым, затем <p> событие щелчка элемента.
С помощью addEventListener() метод вы можете указать тип распространения с помощью "useCapture" параметр:
addEventListener( event , function , useCapture );Значение по умолчанию является ложным, который будет использовать кипящий распространение, когда значение устанавливается истина, событие использует распространение захвата.
пример
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Попробуй сам " removeEventListener() метод
removeEventListener() метод удаляет обработчики событий , которые были прикреплены с addEventListener() метод:
Поддержка браузеров
Числа в таблице определяет первую версию браузера, который полностью поддерживает эти методы.
| метод | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
| removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Примечание: addEventListener() и removeEventListener() методы не поддерживаются в IE 8 и более ранних версиях и Opera 6.0 и более ранних версий. Однако для этих конкретных версий браузеров, вы можете использовать attachEvent() метод , чтобы присоединить обработчики событий к элементу, и detachEvent() метод , чтобы удалить его:
element. attachEvent (event, function);
element. detachEvent (event,
function); пример
Решение кросс-браузер:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
}
Попробуй сам " Ссылка на объект HTML DOM Event
Для получения списка всех событий HTML DOM, смотрите на нашем полный HTML DOM Event Object Reference .