JavaScript | Метод addEventListener()

Вступление

Когда мы говорим о документе, который открыт в браузере, тогда мы можем говорить об объектной модели документа (DOM). Что это значит? Это значит, что каждый элемент HTML-разметки может быть «конвертирован» в объект JavaScript, который будет иметь свой набор свойств (пары «ключ/значение»). Есть ли у элемента родитель, есть ли у элемента дети. Какие атрибуты у элемента, сколько классов у элемента, что находится между открывающим и закрывающим тегами элемента. С этим понятно — есть элемент(HTML, XML), есть объект(JavaScript).

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

Зачем нужны события? Чтобы фиксировать пользовательское взаимодействие с документом. Пользователь может кликнуть, может потянуть мышкой, зажать комбинацию клавиш на клавиатуре. Ещё события нужны для сетевого взаимодействия, например, когда мы получаем данные с сервера или отправляем их на сервер.

Зачем нужны слушатели событий? Чтобы отлавливать события и принимать какие-то действия или бездействия. Метод addEventListener() позволяет добавлять слушатель событий на любой элемент документа. Его большой плюс в том, что на один элемент мы можем вешать любое количество слушателей событий и при этом писать разную логику для обработки самого события. Например, пользователь может выделить какое-нибудь слово в документе, а мы ему выведем определение этого слова и покрасим все похожие слова в документе к синий цвет.

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

Объект Event просто называется «событием» (event). Это позволяет сигнализировать о том, что что-то произошло, например, что изображение завершило загрузку.

«Потенциальная цель события» (potential event target) — null или объект EventTarget.

У события есть связанная «цель» (target) (потенциальная цель события). Если не указано иное, она не имеет значения (null).

У события есть связанная «родственная цель» (relatedTarget) (потенциальная цель события). Если не указано иное, она не имеет значения (null).

Объект EventTarget представляет цель, которой может быть отправлено событие, когда что-то произошло.

Каждый объект EventTarget имеет связанный «список слушателей событий» (event listener list) (список из нуля или более слушателей событий). Изначально это пустой список.

«Слушатель событий» (event listener) может использоваться для наблюдения за конкретным событием и состоит из:

1. type (строка)
2. callback (null или объект EventListener)
3. capture (a boolean, изначально ложный false)
4. passive (a boolean, изначально ложный false)
5. once (a boolean, изначально ложный false)
6. removed (a boolean для бухгалтерских целей, изначально ложный false)

Синтаксис метода addEventListener()

target . addEventListener(type, callback [, options])

Обозначения:

target — это цель события. Это объект из документа(или сам документ), которому будет отправлен объект события.

type — это значение атрибута type у события.

callback — устанавливает обратный вызов, который будет вызываться при отправке события.

options — устанавливает параметры для конкретного слушателя. Для совместимости это может быть логическое значение, и в этом случае метод ведёт себя точно так же, как если бы значение было указано в качестве захвата параметров — capture options.

Описание

Метод addEventListener() входит в «Интерфейс EventTarget» стандарта объектной модели документа «DOM«.

Пример № 1 — Вызов addEventListener() с двумя параметрами (минимальный набор для вызова)

Разметка такая:

<body>
   <h1>Пример 01</h1>
   <p>Вызов addEventListener() с двумя параметрами (минимальный набор для вызова)</p>
</body>

Получим элемент H1 в переменную:

var elh1 = document.getElementsByTagName("h1")[0]

Добавляем слушатель события для элемента H1:

elh1.addEventListener("click", () => console.log("Клик был совершён на элементе h1"))

Пример 01 - Кликнули по заголовку h1 - Увидели запись в консоли - JavaScript — Пример 01 — Кликнули по заголовку h1 — Увидели запись в консоли — JavaScript

Сейчас мы можем добавить ещё один слушатель событий. Предлагаю на этот раз передать в функцию сам объект события и посмотреть из чего он состоит:

elh1.addEventListener("click", (event) => console.log(event))

Пример 01 - Кликнули по заголовку h1 - Увидели объект события в консоли - JavaScript — Пример 01 — Кликнули по заголовку h1 — Увидели объект события в консоли — JavaScript

Обратите внимание. Мы выполнили сразу две задачи при одном клике на одном элементе h1.

Первый результат — вывод в консоль строки.
Второй результат — вывод в консоль объекта события.

Если сейчас посмотреть на синтаксис метода addEventListener() ещё раз, то:

target — это объект h1 текущего документа, который является целью события
type — это значение «click» атрибута type у события.
callback — анонимная функция, которая будет вызываться при отправке события., которая выведет в консоль объект события.

Пример № 2 — Вызов addEventListener() на всём документе

Очень часто можно встретить запись вида document.addEventListener(). Такая запись означает то, что мы вешаем слушатель события на весь документ.

Если мы добавим для события атрибут type со значением «click», то мы можем выводить в консоль элемент документа, на котором был вызван клик.

Например разметка

<body>
   <h1>Пример 02</h1>
   <p>Вызов addEventListener() на документе</p>
   <h2>Получение элемента, по которому кликнули</h2>
</body>

Добавим к этому документу слушатель событий с такими параметрами:

document.addEventListener("click", event => console.log(event.target))

Мы будем получать в консоль тот элемент, по которому будем кликать:

Кликнули на разные элементы - JavaScript — Кликнули на разные элементы — JavaScript

Информационные ссылки

Стандарт DOM — https://dom.spec.whatwg.org/

Стандарт UI Events — https://www.w3.org/TR/uievents/