JavaScript EventTarget Определение и применение

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	Объект, указывающий характеристики прослушивателя событий (является необязательным параметром ). Доступные опции: capture - Логическое значение, которое определяет будут ли события этого типа отправлены зарегистрированному прослушивателю (обработчику события) перед отправкой любому EventTarget DOM . Если передать логическое значение true , то функция будет зарегистрирована как перехватывающий обработчик и будет вызываться в фазе перехвата (capture phase bubbling phase ). once - Логическое значение, которое указывает на то, что обработчик события должен быть вызван не более одного раза после добавления. Если указано логическое значение true , то прослушиватель будет автоматически удален при вызове. passive - Логическое значение, которое, если соответствует значению true , указывает на то, что функция, указанная прослушивателем, никогда не отменит действие события по умолчанию (вызовет метод preventDefault() preventDefault() , то браузер пользователя проигнорирует его, и создаст при этом предупреждение в консоли.
useCapture	Логическое значение, которое определяет будут ли события этого типа отправлены зарегистрированному прослушивателю (обработчику события) перед отправкой любому EventTarget , расположенному под ним в дереве DOM . Если передать логическое значение true , то функция будет зарегистрирована как перехватывающий обработчик и будет вызываться в фазе перехвата (capture phase ). Значение по умолчанию false - обработчик события будет срабатывать в фазе всплытия (bubbling phase ). Необязательный параметр. Параметр useCapture не всегда был необязательным, в идеале, вы должны включить его для более широкой браузерной поддержки.

Пример использования Базовое использование метода Использование JavaScript метода addEventListener()

• 1

const ul = document .querySelector("ul "), // выбираем первый элемент ul в документе listElements = document .querySelectorAll("li "); // выбираем все элементы li в документе const myFunc = function (event ) { if (event .target.tagName === "LI ") { // если объект, который отправил событие имеет значение свойства tagName равное LI event .target.style.color = "green "; // то задаем цвет текста зеленый } } ; ul .addEventListener("click ", myFunc ); // устанавливаем элементу ul обработчик события click listElements .forEach(function (elem ) { // проходим все элементы коллекции elem .addEventListener("dblclick ", function (){ // устанавливаем каждому элементу li обработчик события dblclick this .style.color = "#000 "; // задаем цвет текста черный } ) } )

В этом примере мы разместили маркированный список (

), внутри которого мы разместили пять элементов списка (
• ). С помощью метода 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";