Теория addEventListener, синтаксис, примеры.

"Что такое метод addEventListener" - теория с синтаксисом, парметры addEventListener. И разберем пример использования "addEventListener".

О методе "addEventListener" подробно.

1. Теория, синтаксис "addEventListener".
2. Параметры "addEventListener".
3. Пример использования "addEventListener".

Теория, синтаксис "addEventListener".

Самое главное для "addEventListener" - это перевести слово "addEventListener"! Слово "addEventListener" состоит из трех:

add - добавлять(глагол).

Event - событие(сущ).

Listener - слушатель(сущ)

И далее немного(совсем немного теории) с синтаксисом:

Теория addEventListener().

Метод addEventListener() интерфейса EventTarget настраивает функцию, которая будет вызываться всякий раз, когда указанное событие доставляется целевому объекту.

Общими целями являются элемент или его дочерние элементы, документ и окно, но целью может быть любой объект, который поддерживает события (например, XMLHttpRequest).

Примечание: Метод addEventListener() является рекомендуемым способом регистрации прослушивателя событий. Преимущества заключаются в следующем:

Это позволяет добавлять более одного обработчика для события. Это особенно полезно для библиотек, модулей JavaScript или любого другого вида кода, который должен хорошо работать с другими библиотеками или расширениями.

В отличие от использования свойства onXYZ, это дает вам более детальный контроль фазы при активации прослушивателя (захват или пузырькование).

Он работает с любым целевым объектом события, а не только с элементами HTML или SVG.

Метод addEventListener() работает путем добавления функции или объекта, который реализует EventListener, в список прослушивателей событий для указанного типа события в EventTarget, для которого он вызывается. Если функция или объект уже есть в списке прослушивателей событий для этого целевого объекта, функция или объект не добавляются во второй раз.

Синтаксис addEventListener

addEventListener(type, listener)

addEventListener(type, listener, options)

addEventListener(type, listener, useCapture)

Что такое прослушиватель addEventListener?

Если вы посмотрите на синтаксис метода addEventListener, то увидите, что второй аргумент имеет наименование "listener"(и в самом методе присутствует данное слово), что в переводе с английского означает слушатель.

Параметры "addEventListener".

Type(тип) "addEventListener".

Строка, учитывающая регистр, представляющая тип события для прослушивания.

Listener(слушатель сущ) "addEventListener".

Объект, который получает уведомление (объект, реализующий интерфейс Event) при возникновении события указанного типа. Это должен быть null, объект с методом handleEvent() или функция JavaScript. Смотрите обратный вызов прослушивателя событий для получения подробной информации о самом обратном вызове.

Options(выбор) "addEventListener".

Объект, который определяет характеристики прослушивателя событий. Доступными вариантами являются:

Capture(захватить) "addEventListener".

Логическое значение, указывающее, что события этого типа будут отправлены зарегистрированному прослушиванию перед отправкой в любой EventTarget под ним в дереве DOM. Если не указано, по умолчанию используется значение false.

Once(однажды) "addEventListener".

Логическое значение, указывающее, что прослушиватель должен быть вызван не более одного раза после добавления. Если true, то прослушиватель будет автоматически удален при вызове. Если не указано, по умолчанию используется значение false.

Passive(пассивный) "addEventListener".

Логическое значение, которое, если true, указывает, что функция, указанная listener, никогда не будет вызывать preventDefault(). Если пассивный прослушиватель действительно вызовет функцию preventDefault(), пользовательский агент не сделает ничего, кроме как сгенерирует предупреждение консоли. Если не указано, по умолчанию используется значение false – за исключением того, что в браузерах, отличных от Safari, по умолчанию используется значение true для событий wheel, mousewheel, touchstart и touchmove. Смотрите раздел "Повышение производительности прокрутки с помощью пассивных слушателей", чтобы узнать больше.

Signal(сигнал) "addEventListener".

Сигнал прерывания. Прослушиватель будет удален при вызове метода abort() данного объекта AbortSignal. Если не указано, то сигнал прерывания не связан с прослушивателем.

UseCapture(Использование захвата) "addEventListener".

Логическое значение, указывающее, будут ли события этого типа отправляться зарегистрированному прослушивателю перед отправкой в любой EventTarget под ним в дереве DOM. События, которые распространяются вверх по дереву, не будут вызывать прослушиватель, назначенный для использования capture. Обработка событий и захват - это два способа распространения событий, которые происходят в элементе, вложенном в другой элемент, когда оба элемента зарегистрировали дескриптор для этого события. Режим распространения событий определяет порядок, в котором элементы получают событие. Смотрите События уровня DOM 3 и порядок событий JavaScript для получения подробного объяснения. Если не указано, значение…

Пример использования "addEventListener".

Надеюсь вы выучили всю теорию с параметрами метода "addEventListener" - это очень важно !

Как сделать пример с использованием "addEventListener".

Для того, чтобы сделать пример с "addEventListener" вам понадобится:

Создадим ссылку.

Вставляем туда id с произвольным значением "events_addEventListener" и тестом:

Проверь работу метода addEventListener - Нажми на меня!

Получаем:

<a id="events_addEventListener">Проверь работу метода addEventListener - Нажми на меня!</a>

Javascript

Используем один из способов использования "addEventListener" - здесь применен способ обращения к "id" напрямую:

events_addEventListener .addEventListener("click", myFoo);

Вызываемая функция myFoo с alert

function myFoo() { alert("Это пример метода addEventListener"); }

Соберем весь код:

Html:

<a id="events_addEventListener">Проверь работу метода addEventListener - Нажми на меня!</a>

Javascript

<script>

events_addEventListener .addEventListener("click", myFoo);

function myFoo() { alert("Это пример метода addEventListener"); }

</script>

Пример работы "addEventListener".

Далее размещаем приведенный выше код прямо здесь! Для того, чтобы проверить =- как работает "addEventListener" - нажмите по ссылке ниже:

Проверь работу метода addEventListener - Нажми на меня!