Всплывание событий

Всплывание событий — это тип DOM. распространения событий ^{[ 1 ]} где событие сначала срабатывает на самом внутреннем целевом элементе, а затем последовательно срабатывает на предках (родителях) целевого элемента в той же иерархии вложенности, пока не достигнет самого внешнего элемента DOM или объекта документа. ^{[ 2 ]} (При условии, что обработчик инициализирован). Это один из способов обработки событий в браузере. События — это действия, выполняемые пользователем, такие как нажатие кнопки, изменение поля и т. д. Обработчики событий используются для выполнения кода при возникновении определенного типа события пользовательского интерфейса, например при нажатии кнопки или завершении загрузки веб-страницы. .

Обзор

Рассмотрим структуру DOM, в которой есть 3 элемента, вложенных в следующем порядке: элемент 1 (Div), элемент 2 (Span), элемент 3 (кнопка), чьи обработчики при нажатии — это handler1(), handler2() и handler3() соответственно. .

<div id="Element1" onclick="handler1()"> 
  <span id="Element2" onclick="handler2()">  
    <input type="button" id="Element3" onclick="handler3()"/>  
  </span>  
</div>

При нажатии кнопки Element3 сначала запускается обработчик событий для элемента 3, затем событие всплывает вверх и вызывается обработчик для непосредственного родительского элемента — элемент 2, затем обработчик для элемента 1 и так далее, пока он не достигнет самого внешнего DOM. элемент.

Порядок обработки событий: handler3() -> handler2() -> handler1().

Самый внутренний элемент, из которого запускается событие, называется целевым элементом. ^{[ 3 ]} Большинство браузеров рассматривают всплытие событий как способ распространения событий по умолчанию. Однако существует другой подход к распространению событий, известный как захват событий . ^{[ 4 ]} что является прямой противоположностью всплытию событий, когда обработка событий начинается с самого внешнего элемента (или документа) структуры DOM и продолжается до целевого элемента, выполняя обработчик целевого элемента последним по порядку.

Выполнение

Все обработчики событий рассматривают всплытие событий как способ обработки событий по умолчанию. Но пользователь может вручную выбрать способ распространения, указав его в качестве последнего параметра в addEventListener(). ^{[ 5 ]} любого элемента в JavaScript.

addEventListener("type", "Listener", "CaptureMode")

Если CaptureMode имеет значение False, событие будет обработано с использованием всплытия событий.

Если CaptureMode имеет значение True, событие будет обработано с использованием перехвата событий.

Если пользователь не указывает какое-либо значение аргумента CaptureMode, то по умолчанию это рассматривается как всплытие событий. Большинство браузеров поддерживают как всплывание событий, так и их перехват (кроме IE <9 и Opera<7.0, которые не поддерживают перехват событий). ^{[ 1 ]}

JavaScript также предоставляет свойство события, называемое пузырьками, чтобы проверить, является ли событие всплывающим событием или нет. Он возвращает логическое значение True или False в зависимости от того, может ли событие дойти до родительских элементов в структуре DOM или нет.

var isBubblePossible = event.bubbles;

isBubblePossible: True, если событие может дойти до предков.

isBubblePossible: False, если событие не может всплывать. ^{[ 6 ]}

Использование всплывания событий

Для обработки случаев, когда одно событие имеет более одного обработчика, можно реализовать концепцию всплытия событий. Основное использование пузырькового обмена событиями — это регистрация функций по умолчанию, присутствующих в программе. В последнее время не многие разработчики используют именно захват событий или всплывание событий. Нет необходимости реализовывать всплытие событий; пользователям может быть сложно отслеживать действия, выполняемые в результате события. ^{[ 1 ]}

Предотвращение всплытия событий

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

1) stopPropagation() : этот метод останавливает дальнейшее распространение любого конкретного события его родителям, вызывая только обработчик событий целевого элемента. Несмотря на то, что Internet Explorer ниже версии 9 поддерживается всеми W3C-совместимыми браузерами, ему требуется исторический псевдоним cancelBubble . ^{[ 7 ]} как в:

event.cancelBubble = true;

Для всех браузеров, совместимых с W3C:

event.stopPropagation();

2) stopImmediatePropagation() : этот метод не только остановит дальнейшее распространение, но также остановит выполнение любого другого обработчика целевого события. В DOM одно и то же событие может иметь несколько независимых обработчиков, поэтому остановка выполнения одного обработчика событий обычно не влияет на другие обработчики той же цели. Но метод stopImmediatePropagation() предотвращает выполнение любого другого обработчика той же цели. ^{[ 7 ]}

Для всех браузеров, совместимых с W3C:

event.stopImmediatePropagation();

Другой способ остановить всплывание событий — отменить само событие, однако это также предотвращает выполнение целевого обработчика.

См. также

DOM-события

Ссылки

^ Перейти обратно: ^а ^б ^с «Javascript — Порядок событий» . Режим причуд . Проверено 11 сентября 2016 г.
^ «Объекты документа HTML DOM» . W3Школы . Архивировано из оригинала 10 ноября 2016 года . Проверено 11 сентября 2016 г.
^ «целевое свойство события» . W3Школы . Архивировано из оригинала 6 января 2024 года.
^ «Пузырь и захват» . Учебник по современному JavaScript . Архивировано из оригинала 19 ноября 2016 года . Проверено 11 сентября 2016 г.
^ «Метод addEventListener() HTML DOM-документа» . W3Школы . Архивировано из оригинала 6 января 2024 года.
^ «Свойство события пузырьков» . W3Школы . Проверено 11 сентября 2016 г.
^ Перейти обратно: ^а ^б Мандип Пасбола (12 октября 2013 г.). «Всплытие событий. Как это предотвратить?» . Разметка Javascript . Архивировано из оригинала 17 февраля 2017 года . Проверено 11 сентября 2016 г.

[:2-1] Перейти обратно: ^а ^б ^с «Javascript — Порядок событий» . Режим причуд . Проверено 11 сентября 2016 г.

[2] «Объекты документа HTML DOM» . W3Школы . Архивировано из оригинала 10 ноября 2016 года . Проверено 11 сентября 2016 г.

[3] «целевое свойство события» . W3Школы . Архивировано из оригинала 6 января 2024 года.

[4] «Пузырь и захват» . Учебник по современному JavaScript . Архивировано из оригинала 19 ноября 2016 года . Проверено 11 сентября 2016 г.

[5] «Метод addEventListener() HTML DOM-документа» . W3Школы . Архивировано из оригинала 6 января 2024 года.

[6] «Свойство события пузырьков» . W3Школы . Проверено 11 сентября 2016 г.

[:1-7] Перейти обратно: ^а ^б Мандип Пасбола (12 октября 2013 г.). «Всплытие событий. Как это предотвратить?» . Разметка Javascript . Архивировано из оригинала 17 февраля 2017 года . Проверено 11 сентября 2016 г.

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

[ 5 ]

[ 6 ]

[ 7 ]