JavaScript - Event Capturing: A Beginner's Guide

Здравствуйте, будущие маги JavaScript! Сегодня мы отправимся в увлекательное путешествие в мир Event Capturing. Не волнуйтесь, если вы никогда не писали ни строчки кода — я буду вашим доброжелательным проводником, и мы вместе изучим это понятие шаг за шагом. Так что возьмите杯 свой любимого напитка и давайте окунемся в это!

Что такое Event Capturing?

Прежде чем мы углубимся в детали, начнем с простой аналогии. Представьте, что вы на семейном собрании, и ваш очаровательный маленький cousin сказал что-то смешное. Смеются сначала ваши дедушка и бабушка (самое старшее поколение), затем ваши родители, и наконец, доходит до вас. Это похоже на то, как работает event capturing в JavaScript!

В мире веб-разработки, event capturing — это фаза распространения события, когда событие сначала捕获ывается внешним элементом, а затем передается внутрь элементов. Это как игра "передай посылку", но с событиями!

Теперь давайте разберем это более технически:

1. Когда событие occurs на веб-странице (например, клик), оно не happens только на элементе, на который вы кликнули.
2. Событие начинается с вершины DOM (Document Object Model) дерева.
3. Оно затем передается через всех родительских элементов до тех пор, пока не достигнет целевого элемента.
4. Это движение вниз называется "event capturing".

Пример: Основы Event Capturing

Давайте посмотрим на базовый пример, чтобы увидеть, как работает event capturing. Мы создадим простую HTML структуру и добавим немного JavaScript, чтобы продемонстрировать, как работает capture.

<div id="outer">
<div id="middle">
<div id="inner">Нажми меня!</div>
</div>
</div>

<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

outer.addEventListener('click', function() {
console.log('Внешний div clicked');
}, true);

middle.addEventListener('click', function() {
console.log('Средний div clicked');
}, true);

inner.addEventListener('click', function() {
console.log('Внутренний div clicked');
}, true);
</script>

В этом примере у нас есть три вложенных <div> элемента. JavaScript код добавляет обработчики клика к каждому div. Параметр true в addEventListener включает event capturing.

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

Внешний div clicked
Средний div clicked
Внутренний div clicked

Это показывает, как событие捕获ывается с внешнего элемента до самого внутреннего. Это как событие говорит "Привет!" каждому родителю по пути к цели.

Пример: Preventing Default Behaviour

Иногда мы хотим остановить стандартное поведение события. Например, предотвратить отправку формы или открытие ссылки. Давайте посмотрим, как мы можем сделать это с помощью event capturing:

<div id="container">
<a href="https://www.example.com" id="link">Нажми меня!</a>
</div>

<script>
const container = document.getElementById('container');
const link = document.getElementById('link');

container.addEventListener('click', function(event) {
console.log('Контейнер clicked');
event.preventDefault();
}, true);

link.addEventListener('click', function(event) {
console.log('Ссылка clicked');
}, true);
</script>

В этом примере у нас есть ссылка внутри контейнерного div. Обработчик событий контейнера использует event.preventDefault(), чтобы остановить стандартное действие ссылки.

Когда вы кликаете по ссылке, вы увидите:

Контейнер clicked
Ссылка clicked

Но ссылка не будет на самом деле переходить по URL. Это как контейнер говорит, "Нет, мы останемся здесь!"

Пример: Capturing и Остановка Распространения

Иногда мы можем хотеть остановить событие от передвижения дальше по DOM дереву. Мы можем сделать это с помощью event.stopPropagation(). Давайте посмотрим, как:

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

<script>
const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');

grandparent.addEventListener('click', function(event) {
console.log('Дедушка clicked');
}, true);

parent.addEventListener('click', function(event) {
console.log('Родитель clicked');
event.stopPropagation();
}, true);

child.addEventListener('click', function(event) {
console.log('Ребенок clicked');
}, true);
</script>

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

Дедушка clicked
Родитель clicked

Событие останавливается на родителе и не достигает ребенка. Это как родитель говорит, "Достаточно, молодой event!"

Заключение

И вот мы и добрались до конца, друзья! Мы прошли через страну event capturing, от его базового понятия до предотвращения стандартных действий и остановки распространения. Помните, event capturing — это только одна часть потока событий в JavaScript. Это как вступление перед главным событием (намерение!).

Вот быстрый обзор методов, которые мы использовали:

Метод	Описание
addEventListener(event, function, useCapture)	Присваивает обработчик событий элементу. Установите useCapture в true для event capturing.
event.preventDefault()	Prevents the default action of the event.
event.stopPropagation()	Останавливает распространение события по DOM дереву, предотвращая уведомление родительских обработчиков о событии.

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

Credits: Image by storyset