Создание и перехват событий в JavaScript

В JavaScript вы наверняка работали с событиями. В этой статье мы познакомимся с двумя концепциями событий, а именно: Event Bubbling и Event Capturing. Обе эти концепции связаны с распространением событий, которое также известно как поток событий.

Введение

Чтобы понять эти концепции, давайте сначала разберемся, что такое событие. Согласно определению MDN, события — это действия или явления, которые происходят в системе, которую вы программируете — система производит (или «выстреливает») какой-то сигнал, когда происходит событие, и предоставляет механизм, с помощью которого действие может быть автоматически выполнено (то есть запущен какой-то код), когда происходит событие. Это можно рассматривать как сигнал, который вы подаете своему другу, чтобы он что-то сделал, и когда вы подаете этот сигнал, ваш друг начинает это делать.

Существует две основные модели событий: Event Bubbling и Event Capturing.

Теперь давайте разберем их по порядку.

Пузырение событий

Event Bubbling — это концепция вызова обработчиков событий, когда обработчики событий вложены в другой элемент. Пузырение происходит, когда событие происходит на элементе, он сначала обрабатывает событие на себе, затем на своем родителе (если таковой имеется) и так далее, пока не достигнет тела и корневого элемента.

Чтобы понять это, давайте рассмотрим пример.

Это наш фрагмент HTML:

  <div id="grandparent">
        <div id="parent">
            <div id="child"></div>
        </div>
    </div>

и здесь мы добавили на них слушателей событий:

       grandparent.addEventListener("click", (event) => {
            console.log("Grandparent clicked.");
        })
        parent.addEventListener("click", (event) => {
            console.log("parent clicked.");
        })
        child.addEventListener("click", (event) => {
            console.log("child clicked.");
        })

Теперь, если мы щелкнем на дочернем элементе, мы получим результат, подобный этому:

Как мы видим, событие запускается от дочернего элемента к родительскому, от дедушки к бабушке, это означает, что в модели Bubbling событие запускается от самого внутреннего элемента, охватывая по пути всех его предков. Это подобно пузырькам, которые поднимаются снизу вверх в газированном напитке, отсюда и название «пузырьки».

Захват событий

Это полная противоположность пузырькам. В модели Event Capturing событие начинается с наименее специфического элемента и течет вниз к наиболее специфическому элементу. Это означает, что событие будет вызываться от дедушки к бабушке, от родителя к ребенку.

Чтобы использовать модель захвата событий, необходимо передать true в качестве третьего аргумента в функции addEventListner.

Вот фрагмент кода JS :

        grandparent.addEventListener("click", (event) => {
            console.log("Grandparent clicked.");
        }, true)
        parent.addEventListener("click", (event) => {
            console.log("parent clicked.");
        }, true)
        child.addEventListener("click", (event) => {
            console.log("child clicked.");
        }, true)

Вы можете понять обе модели по следующему изображению.

Это все, что у меня есть в голове, на данный момент, я буду добавлять больше в будущем. Спасибо за прочтение.