JavaScript метод addEventListener() объекта EventTarget позволяет зарегистрировать обработчик событий определенного типа для конкретной цели.
В качестве цели могут выступать как такие объекты как Element , Document , Window , или любые другие объекты, которые поддерживают события, например, такой объект как XMLHttpRequest , который широко используется в асинхронных запросах AJAX (от англ. Asynchronous Javascript and XML - "асинхронный JavaScript и XML"), что позволяет конкретной странице обновлять только её часть, не нарушая при этом работу пользователя.
Обращаю Ваше внимание на то, что Вы можете использовать метод removeEventListener() для удаления обработчика событий, присоединенного с помощью метода addEventListener() .
Поддержка браузерами JavaScript синтаксис: target .addEventListener(type , listener ); target .addEventListener(type , listener , options ); target .addEventListener(type , listener , useCapture ); type - String listener - Function options - Object useCapture - Boolean Cпецификация Document Object Model (DOM) Level 2 Events Значения параметровtype | Строковое значение, представляющее тип события для прослушивания (значение чувствительно к регистру). Обязательный параметр. |
listener | Объект, который получает уведомление при возникновении события указанного типа (объект, реализующий интерфейс Event ). Это должен быть объект, реализующий интерфейс EventListener , или функция JavaScript . Обязательный параметр. |
options | Объект, указывающий характеристики прослушивателя событий (является необязательным параметром
). Доступные опции:
|
useCapture | Логическое значение, которое определяет будут ли события этого типа отправлены зарегистрированному прослушивателю (обработчику события) перед отправкой любому EventTarget
, расположенному под ним в дереве DOM
. Если передать логическое значение true , то функция будет зарегистрирована как перехватывающий обработчик и будет вызываться в фазе перехвата (capture phase ). Значение по умолчанию false - обработчик события будет срабатывать в фазе всплытия (bubbling phase ). Необязательный параметр. Параметр useCapture не всегда был необязательным, в идеале, вы должны включить его для более широкой браузерной поддержки. |
- 1
В этом примере мы разместили маркированный список (
- ), внутри которого мы разместили пять
элементов списка (
- ). С помощью метода querySelector() мы выбрали первый
элемент
- в документе, а с помощью метода querySelectorAll() все элементы
- в документе, и инициализировали переменные этими значениями.
С помощью метода addEventListener() мы установили для элемента
- обработчик события "click
" (нажатие левой кнопкой мыши на элементе), который с помощью свойства target объекта Event
проверяет имя тега элемента, и если это значение соответствует значению "LI
", то изменяет стиль цвета текста на зеленый
при срабатывании. Обратите внимание, что зачастую удобнее установить один обработчик на родительский элемент, а не для каждого элемента по отдельности, особенно это актуально при динамическом изменении количества элементов, в этом случае отсутствует необходимость обновлять обработчики для элементов.
Если указано логическое значение true , то функция, указанная прослушивателем, никогда не отменит действие события по умолчанию (вызовет метод preventDefault()). Если обработчик события всё же вызовет метод preventDefault() , то браузер пользователя проигнорирует его, и создаст при этом предупреждение в консоли. Логическое значение false свидетельствует о том, что функция обработчик может отменить действие события по умолчанию (может вызвать метод preventDefault()).
Согласно спецификации, значение по умолчанию для параметра passive всегда равно false . Однако это дает возможность прослушивателям событий, обрабатывающим определенные события касания блокировать основной поток браузера при попытке обработки прокрутки, что может привести к значительному снижению производительности во время обработки прокрутки.
Чтобы предотвратить эту проблему, некоторые браузеры (в частности, и ) изменили значение по умолчанию параметра passive на true для событий touchstart и touchmove в узлах уровня документа Window , Document и Document .body. Это предотвращает вызов прослушивателя событий, поэтому он не может блокировать отрисовку страницы во время прокрутки.
Вам не нужно беспокоиться о значении passive для базового события прокрутки (scroll ), так как его нельзя отменить, прослушиватели событий в любом случае не смогут блокировать показ страницы.
Нюансы использования this в обработчике событияКак правило необходимо передавать элемент, на котором сработал обработчик события, особенно это актуально при использовании обобщённого обработчика событий для элементов одного типа. Если добавить обычную функцию обработчик события к элементу с помощью метода addEventListener() , то значением this внутри такого обработчика будет являться ссылка на элемент. Значение this будет совпадать со значением свойства currentTarget аргумента события объекта Event , передаваемого обработчику события, например:
elem .addEventListener("click ", function (e ) { console .log(this .className); // выведет в консоль значение свойства className элемента elem console .log(e .currentTarget === this ); // true } )Обратите внимание на важный момент, значение this может меняться, например, стрелочные функции не имеют собственного контекста this и в этом случае this не будет ссылаться на элемент:
elem .addEventListener("click ", (e ) => { console .log(this .className); // this не будет ссылаться на элемент elem console .log(e .currentTarget === this ); // false }Давайте разберем еще ситуацию, при которой обработчик события указан как атрибут события на HTML элементе. Код JavaScript в значении атрибута эффективно упаковывается в функцию обработчика, которая связывает значение this способом, соответствующим методу addEventListener() (this в коде представляет ссылку на элемент):
// выведет в консоль значение свойства id элементаПри нажатии на элемент в консоль будет выведена информация о значении глобального атрибута элемента, так как значение this внутри функции, вызываемой кодом в значении атрибута ведет себя согласно стандартным правилам, и ссылается в данном случае на элемент, который инициировал событие. Давайте рассмотрим следующий пример:
// this не будет ссылаться на элемент, который инициировал событие } ;Обратите внимание на важный момент, значение this внутри функции myFunc() будет являться ссылкой на глобальный объект Window , или будет соответствовать значению undefined в том случае, если указан строгий режим (strict mode ).
Для того, чтобы передать необходимый контекст, Вы можете использовать метод call() объекта Function , который позволяет вызывать (выполнять) функцию как метод объекта, устанавливая ее контекст исполнения (this ) в указанное значение, передавая при этом необходимые аргументы:
const myFunc = function () { console .log(this .id) // this будет ссылаться на элемент, который инициировал событие } ;В этом случае при срабатывании события в консоль будет выводиться значение глобального атрибута элемента, который вызвал событие.
Для , чтобы добавить событие щелчка. Когда пользователь нажимает на кнопку ID = "демо" элемента выходной элемент "Hello World":
. Document.getElementById ("демо") innerHTML = "Hello World";
});
Попробуйте » Определение и использованиеМетод addEventListener () используется для добавления обработчика событий для заданного элемента.
примеровВы можете добавить столько событий, в документе, добавляя событие не приведет к перезаписи существующего события.
Этот пример демонстрирует, как добавить два события щелчка в элементе :
Document.getElementById ("myBtn") addEventListener ("щелчок", MYFUNCTION);
Попробуйте »
примеровВы можете добавить различные типы событий в одном элементе.
Этот пример показывает, как добавить несколько событий с элементом :
Document.getElementById ("myBtn") addEventListener ("MouseOver", MYFUNCTION);
. Document.getElementById ("myBtn") addEventListener ("щелчок", someOtherFunction);
. Document.getElementById ("myBtn") addEventListener ("MouseOut", someOtherFunction);
Попробуйте »
примеровПри передаче значения параметра, используйте вызов функции с параметрами "анонимной функции":
document.getElementById ("myBtn"). addEventListener ("щелчок", функция () {
туРипсЫоп (p1, p2);
});
Попробуйте »
примеровИзменить элементы Справочная информация:
document.getElementById ("myBtn"). addEventListener ("щелчок", функция () {
this.style.backgroundColor = "красный";
});
Попробуйте »
примеровИспользуйте дополнительные параметры для демонстрации различных useCapture бурлит и захвата фаз:
Document.getElementById ("myDiv") addEventListener ("щелчок", туРипсЫоп, правда);
Приложить событие щелчка на элемента. Когда пользователь нажимает на кнопку, выход "Hello World" в
Элемент с идентификатором = «демо»:
document.getElementById("demo").innerHTML = "Hello World";
});Больше "Try it Yourself" примеры ниже.
Определение и использованиеaddEventListener() метод придает обработчик события для указанного элемента.
примерВы можете добавить много событий к одному элементу, без перезаписи существующих событий.
В этом примере показано, как добавить два события щелчка на одной и той же элемента:
Document.getElementById("myBtn").addEventListener("click", myFunction);
Попробуй сам "
примерВы можете добавлять события различных типов к одному элементу.
Этот пример показывает, как добавить много событий на одной и той же элемента:
Document.getElementById("myBtn").addEventListener("mouseover", myFunction);
Попробуй сам "
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);
примерПри передаче значений параметров используйте "anonymous function" , которая вызывает указанную функцию с параметрами:
Document.getElementById("myBtn").addEventListener("click", function() {
Попробуй сам "
myFunction(p1, p2);
});
примерИзменение цвета фона элемента:
Document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
- в документе, и инициализировали переменные этими значениями.