Что такое «пузырёк событий» в JavaScript?

Обработка событий - это основополагающий аспект веб-разработки, связанный с объектной моделью документа, позволяющий разработчикам создавать динамичные интерфейсы, обеспечивающие интерактивность. Учитывая большое количество знаний, связанных с обработкой событий, обработка событий является очень важной функцией, которую необходимо понять. Имея базовое представление о том, что такое обработка событий и насколько она полезна, разработчики получают возможность создавать мощные и структурированные веб-приложения. Её название может натолкнуть вас на мысль, что это небольшая забавная функция, не требующая никакой пользы, но вскоре вы поймете всю важность её использования.

Обработка событий - это применение в объектной модели документа, при котором событие на внутреннем целевом элементе эффективно срабатывает, а затем успешно распространяется по остальным частям дерева объектной модели документа. В этом случае то же самое событие передается его предкам (родительским элементам), поднимается вверх по иерархической лестнице, пока, наконец, не достигает корня модели объектов документа.

Ниже приведен наглядный пример того, как работает "пузырение" событий, на примере простого HTML-документа, включающего вложенные элементы:

<div id="element3">
  <div id="element2">
    <button id="element1">Click Me</button>
  </div>
</div>

Давайте также добавим несколько прикрепленных слушателей событий к каждому из этих элементов:

document.getElementById('element3').addEventListener('click', function() {
  console.log('Element3 has been clicked!');
});

document.getElementById('element2').addEventListener('click', function() {
  console.log('Element2 has been clicked!');
});

document.getElementById('element1').addEventListener('click', function() {
  console.log('Element1 has been clicked!');
});

Теперь предположим, что когда кнопка "Нажмите сюда" будет нажата, то произойдут три вещи по порядку. Во-первых, функция click выполнит свой блок кода, что приведет к появлению сообщения console.log "Element1 has been clicked!". Затем тот же самый слушатель событий будет перемещаться вверх по иерархической структуре, направляясь к своему родительскому элементу, который представляет собой элемент, имеющий идентификатор element2. Затем будет выполнен обработчик события в этом элементе, что приведет к появлению сообщения console.log "Element2 has been clicked!". Еще раз переходим к корню, который в данном примере является элементом с идентификатором Element3. В последнюю очередь будет выполнен его слушатель событий, что приведет к появлению сообщения "Element3 has been clicked!".

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

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

Например, ниже приведен пример того, как обработка событий может быть значительно полезной в простой визуальной манере.

<div class="New Orleans">
    <div class="ward" id="3rd">3rd Ward</div>
    <div class="ward" id="7th">7th Ward</div>
    <div class="ward" id="9th">9th Ward</div>
</div>

<script>
    // Attaching event listeners to each child element individually
    document.getElementById('3rd').addEventListener('click', function () {
        console.log('Clicked on 3rd Ward AKA the best ward');
    });

    document.getElementById('7th').addEventListener('click', function () {
        console.log('Clicked on 7th ward');
    });

    document.getElementById('9th').addEventListener('click', function () {
        console.log('Clicked on 9th ward');
    });

</script>

В приведенном выше примере с "пузырьками" событий слушатель событий придется добавить к каждому отдельному дочернему элементу, чтобы вызывать обработчики событий. Как вы можете себе представить, при большом количестве контента это будет очень раздражать.

А теперь ниже мы сделаем то же самое, но с обработчиком событий!

<div class="New Orleans" id="wardSelector">
    <div class="ward" id="3rd">3rd Ward</div>
    <div class="ward" id="7th">7th Ward</div>
    <div class="ward" id="9th">9th Ward</div>
</div>

<script>
    // Attaching event listeners to each child element individually
    document.getElementById('wardSelector').addEventListener('click', function (event) {
        if (event.target.classList.contains("ward")){
            console.log('Clicked on ' + event.target.textContent);  
            //.target refers to the specific element that triggered the event, in the event object
            //.textContent dispatches the text content of the specific element
        }
    });

</script>

Результат тот же, но код значительно сократился!

А теперь подумайте обо всех потрясающих компонентах или аспектах, которые можно создать, используя подобную функцию. Выше показана лишь верхушка айсберга, представьте, что может создать команда людей, объединенных решимостью создать потрясающее приложение. Возможности могут быть безграничны, и всё это при том, что у вас есть возможность максимально сократить объем кода, который необходимо написать! Так много данных можно хранить, так много вариантов или целей можно визуализировать и представлять. И все это благодаря очень важной функции, которая носит забавное название "пузырёк событий"!

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