В JavaScript события представляют собой различные действия, которые происходят на веб-странице, такие как щелчки мыши, нажатия клавиш, прокрутка и многие другие. Одно из ключевых понятий, связанных с обработкой событий, – это всплытие событий (event bubbling).

Что такое всплытие событий?

Всплытие событий – это процесс, при котором событие начинает свое «путешествие» от целевого элемента (например, кнопки, на которую кликнули) и далее поднимается вверх по дереву DOM к родительским элементам. Это происходит в том порядке, в котором элементы вложены, начиная с самого целевого элемента и заканчивая элементом <html>.

Как это работает?

Событие происходит: Когда пользователь взаимодействует с элементом (например, нажимает кнопку), срабатывает событие.
Обработка события: Сначала обрабатывается событие на целевом элементе.
Всплытие: Затем оно «всплывает» к родительским элементам, позволяя им также реагировать на это событие.

Пример кода

Рассмотрим следующий пример, чтобы лучше понять, как работает всплытие событий:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Всплытие событий</title>
</head>
<body>
    <div id="parent" style="padding: 20px; border: 2px solid blue;">
        Родительский элемент
        <button id="child">Кнопка</button>
    </div>

    <script>
        // Обработчик для родительского элемента
        document.getElementById('parent').addEventListener('click', function() {
            alert('Кликнул на родительский элемент');
        });

        // Обработчик для дочернего элемента (кнопка)
        document.getElementById('child').addEventListener('click', function(event) {
            alert('Кликнул на кнопку');
            // event.stopPropagation(); // Если бы мы хотели остановить всплытие
        });
    </script>
</body>
</html>

Объяснение кода

Мы создаём div с идентификатором parent и вложенную кнопку с идентификатором child.
Затем добавляем обработчик события клика для родительского элемента. Когда происходит клик на родительском элементе, выводится одно сообщение.
Также добавляем обработчик для кнопки. Когда пользователь нажимает на кнопку, отображается другое сообщение.

Важные нюансы

Если вы кликнете на кнопку, появится два окна с сообщениями: сначала "Кликнул на кнопку", затем "Кликнул на родительский элемент". Это произошло из-за всплытия.
Если вы раскомментируете строку event.stopPropagation();, всплытие будет остановлено, и сообщение для родительского элемента не появится.

Заключение

Всплытие событий является основополагающим концептом в обработке событий в JavaScript. Понимание того, как оно работает, поможет вам лучше управлять событиями на ваших веб-страницах и избежать неожиданных побочных эффектов. Это особенно полезно при работе с вложенными элементами и при создании интерфейсов пользователя.

Предыдущий вопрос

Объясните концепцию паттерна Стратегия

Следующий вопрос

Что такое захват событий (Event Capturing) в JavaScript и браузерах?

Содержание: