Распространение событий в JavaScript состоит из следующих трех фаз: захват, цель и всплытие. На рис. 1 показана последовательность событий, происходящих, когда событие, например щелчок мышью, инициируется для элемента.
Вверху находится объект Window, который является окном браузера. Он содержит DOM (объектную модель документа).
DOM — это внутреннее представление веб-страницы HTML. Событие DOMContentLoaded указывает на то, что DOM полностью загружен и готов (т. е. проанализирован HTML, нет блокирующих таблиц стилей и т. д.). Чтобы прикрепить прослушиватели событий в файле JavaScript к целевым элементам в DOM, документ должен быть полностью загружен. Если исходный файл JavaScript расположен в нижней части HTML-файла перед закрывающим тегом ‹/body›, проблем не возникнет.
‹!DOCTYPE html›
‹html lang="ru"›
‹голова›‹/голова›
‹тело›
‹script src="app.js"› ‹/script›
‹/тело›
‹/html›
Если вы добавили прослушиватели событий в свой файл JavaScript и заметили, что при инициации действий пользователя нет ответа, то, скорее всего, DOM не была полностью загружена, а исходный файл JavaScript не расположен перед закрывающим элементом тега body.
Если исходный файл JavaScript расположен в верхней части HTML-документа, например, в заголовке, событие DOMContentLoaded необходимо для обеспечения полной загрузки всего документа.
Исходный файл в верхней части HTML-документа:
‹голова›
‹script src="app.js"› ‹/script›
‹/голова›
Файл JavaScript «app.js» должен включать следующее, прежде чем добавлять прослушиватели событий к элементам в документе:
document.addEventListener('DOMContentLoaded', function(){
//DOM загружен. Добавьте функции запуска.})
Цикл событий DOM начинается, когда страница загружается, и JavaScript используется для ответа на действия пользователя. После выполнения кода JavaScript модель DOM изменяется, и браузер обновляет веб-страницу.
Метод JavaScript EventTarget.addEventListener() прикрепляет обработчик событий к элементу в DOM.
Синтаксис addEventListener показан ниже:
EventTarget.addEventListener(событие, функция, useCapture)
document.getElementById('target-element').addEventListener('click', function (e){//Обработка события });
EventTarget выше может быть элементом, объектом документа или объектом окна. Объекты документа и окна имеют разные события.
Типы событий включают следующие:
- События форм.
- События клавиатуры.
- События мыши.
- Объектные события.
функция – это функция, которая вызывается при запуске события.
useCapture – это логическое значение, используемое для указания захвата событий или всплывающих событий. По умолчанию используется значение false, при котором будет использоваться всплывающее событие.
Фаза захвата (1). На рисунке 1, когда целевой элемент ‹td› запускается событием «щелчок» в ячейке таблицы «Над рекой, Чарли», событие сначала проходит через Объект Window, затем DOM и вниз, пока не будет достигнут целевой элемент. По сути, все элементы выше ‹td›, обозначенные красным путем, будут уведомлены о событии «щелчка» в выделенном ‹td› до того, как цель будет достигнута.
Целевая фаза (2): событие достигло целевого элемента. [событие.цель]
Фаза всплытия (3): когда событие щелчка мыши реализуется в ячейке таблицы «Над рекой, Чарли» в целевом элементе ‹td›, предковые элементы получают одно и то же событие, начиная с родительского элемент ‹tr› и вверх по дереву DOM, заканчиваясь объектом Window. По сути, все элементы выше ‹td›, обозначенные синим контуром, будут уведомлены о событии «щелчок» по выделенному ‹td›.
