Всплывающие события — важная концепция в JavaScript, относящаяся к порядку, в котором обрабатываются события, когда они происходят во вложенных элементах HTML.
Когда событие происходит с элементом, оно влияет не только на этот конкретный элемент; он также может влиять на свои родительские элементы вплоть до корня документа. Всплывание событий описывает процесс, посредством которого события «всплывают» от целевого элемента через его родительские элементы в иерархии DOM.
Как работает всплывающее окно событий
Когда в элементе происходит событие, например нажатие кнопки, происходит следующая последовательность событий:
- Событие сначала запускается для целевого элемента (элемента, в котором возникло событие).
- Затем событие распространяется на родительский элемент цели, затем на родительский элемент и так далее, пока не достигнет корневого элемента (обычно элемента
<html>
) документа.
Это распространение событий от целевого элемента к корню называется всплывающим пузырем событий.
Почему важно всплывать события
Всплывание событий имеет практическое значение, когда речь идет об обработке событий и делегировании:
- Упрощенная обработка событий. Всплывающие события позволяют вам прикрепить один прослушиватель событий к общему элементу-предку, и этот прослушиватель будет запускаться для событий во всех элементах-потомках. Это особенно полезно, когда у вас есть список элементов с похожим поведением, так как вы можете избежать присоединения отдельных прослушивателей событий к каждому элементу.
- Динамический контент: когда вы динамически добавляете элементы в DOM (с помощью JavaScript), вам не нужно напрямую присоединять прослушиватели событий к этим новым элементам. Вместо этого вы можете воспользоваться всплывающими окнами событий для обработки событий родительского элемента, даже для элементов, которые были добавлены после первоначальной загрузки страницы.
Пример:
Рассмотрим простой пример со следующими вложенными элементами:
<section> <p> I am a paragraph: <button>Click</button> </p> </section>
Предположим, у вас есть прослушиватель событий щелчка по всем этим элементам с разными функциями:
const button = document.querySelector("button"); const paragraph = document.querySelector("p"); const section = document.querySelector("section"); button.addEventListener("click", () => { console.log("button clicked"); }); paragraph.addEventListener("click", () => { console.log("paragraph clicked"); }); section.addEventListener("click", () => { console.log("section clicked"); });
Когда вы нажимаете кнопку, событие всплывает вверх по иерархии, и вы получаете следующий вывод в консоли:
Это потому что:
- Событие срабатывает на кнопке.
- Затем по абзацу
- Наконец, в самом дальнем разделе
Остановка всплывающих событий
В некоторых случаях вы можете захотеть остановить распространение события вверх по иерархии DOM. Для этого вы можете использовать метод event.stopPropagation()
в вашем обработчике событий:
const button = document.querySelector("button"); const paragraph = document.querySelector("p"); const section = document.querySelector("section"); button.addEventListener("click", (event) => { console.log("button clicked"); event.stopPropagation(); }); paragraph.addEventListener("click", () => { console.log("paragraph clicked"); }); section.addEventListener("click", () => { console.log("section clicked"); });
И теперь вы увидите в консоли только «кнопку нажали».
Остановка распространения события может быть полезна, когда вы хотите, чтобы событие влияло только на целевой элемент, а не на его родительские элементы.
Надеюсь, вы нашли это полезным!