JavaScript - Event Bubbling: A Beginner's Guide

Здравствуйте, будущие маги JavaScript! ? Сегодня мы отправимся в увлекательное путешествие в мир Event Bubbling. Не волнуйтесь, если вы никогда о нем не слышали – к концу этого руководства вы будете наполнены знаниями! (Увидели, что я здесь сделал? ?)

Что такое Event Bubbling?

Представьте, что вы на семейном собрании и tellingjoke своему дяде. Ваш дядя смеется, затем ваша тетя overhears и фыкает, затем ваши бабушка и дедушка подхватывают и начинают хихикать. Это как-то похоже на event bubbling в JavaScript!

На техническом языке, event bubbling - это способ传播 событния в дереве DOM (Document Object Model). Когда событие occurs на элементе, оно сначала запускает обработчики на нем, затем на его родителе, и, наконец, на всех других предках.

Давайте разберем это на простом примере:

<div id="grandparent">
<div id="parent">
<button id="child">Нажми меня!</button>
</div>
</div>

document.getElementById('child').addEventListener('click', function() {
console.log('Child clicked!');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('Parent clicked!');
});

document.getElementById('grandparent').addEventListener('click', function() {
console.log('Grandparent clicked!');
});

Если вы нажмете на кнопку, вы увидите это в консоли:

Child clicked!
Parent clicked!
Grandparent clicked!

Это и есть действие event bubbling! Событие начинается с кнопки (child), затем поднимается к родителю и, наконец, к дедушке.

Шаги Event Bubbling

Теперь, когда мы понимаем базовую концепцию, давайте разберем шаги event bubbling:

1. Событие occurs на最深нем элементе (целеый элемент).
2. Обработчик событния на целевом элементе запускается.
3. Событие поднимается к родительскому элементу, и его обработчик запускается.
4. Это продолжается до тех пор, пока не достигнет объекта document.

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

Event Bubbling с использованием 2 вложенных DIV

Давайте рассмотрим более практический пример с двумя вложенными div:

<div id="outer" style="background-color: blue; padding: 20px;">
<div id="inner" style="background-color: red; padding: 20px;">
Нажми меня!
</div>
</div>

document.getElementById('outer').addEventListener('click', function() {
console.log('Outer div clicked');
});

document.getElementById('inner').addEventListener('click', function() {
console.log('Inner div clicked');
});

Когда вы нажмете на внутренний красный div, вы увидите:

Inner div clicked
Outer div clicked

Событие начинается с внутреннего div и поднимается к внешнему div. Это как бросить камешек в пруд – рябь начинается в центре и расходится наружу!

Event Bubbling с использованием 3 уровней вложенности

Теперь давайте добавим еще один уровень к нашему примеру:

<div id="grandparent" style="background-color: green; padding: 20px;">
<div id="parent" style="background-color: blue; padding: 20px;">
<div id="child" style="background-color: red; padding: 20px;">
Нажми меня!
</div>
</div>
</div>

document.getElementById('grandparent').addEventListener('click', function() {
console.log('Grandparent div clicked');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('Parent div clicked');
});

document.getElementById('child').addEventListener('click', function() {
console.log('Child div clicked');
});

Теперь, когда вы нажмете на самый внутренний красный div, вы увидите:

Child div clicked
Parent div clicked
Grandparent div clicked

Это как семейная иерархия – младший говорит первым, затем родители, и, наконец, дедушки!

Остановка Event Bubbling

Иногда вы можете хотите остановить это поведение bubbling. Может быть, вы не хотите, чтобы ваши дедушки слышали этот анекдот! В JavaScript мы можем сделать это, используя метод stopPropagation():

document.getElementById('child').addEventListener('click', function(event) {
console.log('Child div clicked');
event.stopPropagation();
});

Теперь, когда вы нажмете на div ребенка, вы увидите только:

Child div clicked

Событие останавливается прямо там, как если бы вы положили пробку в бутылку!

Полезные методы для обработки событний

Вот таблица полезных методов для обработки событний в JavaScript:

Метод	Описание
addEventListener()	Присоединяет обработчик событний к элементу
removeEventListener()	Удаляет обработчик событний из элемента
event.stopPropagation()	Останавливает подъем событния по дереву DOM
event.preventDefault()	Prevents the default action of the event
event.target	Возвращает элемент, который triggered the event
event.currentTarget	Возвращает элемент, чей обработчик событний triggered the event

Заключение

И вот мы добрались до конца, друзья! Мы проплыли через концепцию Event Bubbling в JavaScript. Помните, что понимание event bubbling важно для управления сложной обработкой событний в ваших веб-приложениях. Это как пониманиеodynamics в семье на собрании – знание, кто что слышит и когда, может спасти вас от массы недоразумений!

Практикуйтесь с этими примерами, экспериментируйте с различными структурами вложенности, и вскоре вы будете обрабатывать событния как профессионал. Счастливого кодирования, и пусть ваши событния всегда поднимаются плавно! ?

Credits: Image by storyset