JavaScript HTML DOM EventListener
addEventListener() Метод
Пример
Добавьте прослушиватель событий, который срабатывает при нажатии пользователем кнопки:
document.getElementById("myBtn").addEventListener("click", displayDate);
Метод addEventListener () присоединяет обработчик событий к указанному элементу.
Метод addEventListener () прикрепляет обработчик событий к элементу без перезаписи существующих обработчиков событий.
Можно добавить несколько обработчиков событий в один элемент.
Можно добавить несколько обработчиков событий одного типа в один элемент, т.е. два события "Click".
Прослушиватели событий можно добавлять к любому объекту DOM, а не только к элементам HTML. т.е. объект Window.
Метод 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!"); });
Вы также можете ссылаться на внешнюю "именованную" функцию:
Пример
Alert "Hello World!" when the user clicks on an element:
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);
Добавление обработчика событий в объект Window
Метод addEventListener () позволяет добавлять прослушиватели событий на любой объект HTML DOM, такой как HTML-элементы, HTML-документ, объект Window или другие объекты, поддерживающие события, такие как объект xmlHttpRequest.
Пример
Добавьте прослушиватель событий, который срабатывает, когда пользователь изменяет размер окна:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Передача параметров
При передаче значений параметров используйте "анонимную функцию", которая вызывает заданную функцию с параметрами:
Пример
element.addEventListener("click", function(){ myFunction(p1, p2); });
Восходящая маршрутизация событий или захват событий?
Существует два способа распространения событий в DOM HTML, восходящей и захватывающей.
Распространение событий — это способ определения порядка элементов при возникновении события. Если у вас есть элемент <p> внутри элемента <div>, и пользователь щелкает элемент <p>, то какой элемент "Click" должен обрабатываться первым?
При восходящей маршрутизации внутреннее событие самого элемента обрабатывается первым, а затем внешним: сначала обрабатывается событие Click элемента <p>, затем событие Click элемента <div>.
При захвате внешнего самого элемента сначала обрабатывается событие, а затем внутреннее: событие Click элемента <div> будет обработано первым, а затем <p> событие Click элемента.
С помощью метода addEventListener () можно указать тип распространения, используя параметр "useCapture присвоено":
addEventListener(event, function, useCapture);
Значение по умолчанию — false, которое будет использовать восходящее распространение, если значение установлено в true, событие использует распространение захвата.
Пример
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Метод removeEventListener ()
Метод removeEventListener () удаляет обработчики событий, которые были присоединены с помощью метода addEventListener ():
Пример
element.removeEventListener("mousemove", myFunction);
Поддержка браузера
Числа в таблице определяют первую версию обозревателя, полностью поддерживающую эти методы.
| Method | |||||
|---|---|---|---|---|---|
| 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 () для присоединения обработчиков событий к элементу и метод детачевент () для его удаления:
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
Чтобы просмотреть список всех событий HTML DOM, посмотрите на нашу полную ссылку на объект события HTML DOM.
