Главная > Блог > Web-разработка > JavaScript и TypeScript >

Браузерные события, часть 2 из 5. Погружение и всплытие

23.04.2022

Теги: DOM • Frontend • HTML • JavaScript • Web-разработка • Событие • Теория

Когда некоторый объект инициирует событие, то оно не просто возникает на нём, а распространяется в документе определённым образом. Это распространение является двунаправленным — от window к целевому элементу и потом обратно. Самое главное для нас — когда событие путешествует по документу, то браузер вызывает обработчики элементов, через которые оно проходит.

Три фазы события

Стандарт DOM Events описывает три фазы прохода события:

Фаза погружения (capturing phase) — событие сначала идёт сверху вниз.
Фаза цели (target phase) — событие достигло целевого (исходного) элемента.
Фаза всплытия (bubbling stage) — событие начинает всплывать.

Фаза погружения

На этой фазе могут быть вызваны только обработчики, зарегистрированные посредством addEventListener, у которых capture имеет значение true.

element.addEventListener(…, …, {capture: true, …});
// или просто true третьим аргументом
element.addEventListener(…, …, true);

По умолчанию capture имеет значение false. Если его не указать или установить равным false, то обработчик в этом случае будет работать на этапе всплытия.

Фаза цели

Самый глубокий элемент, который вызывает событие, называется целевым элементом. На этой фазе будут вызваны все обработчики, прикреплённые к целевому объекту через html-атрибут on{event}, свойство on{event} и метод addEventListener (с capture равным true или false).

Обратите внимание, что хоть и формально существует три фазы, вторую фазу («фазу цели» — событие достигло элемента) нельзя обработать отдельно, при её достижении вызываются все обработчики — и на всплытие, и на погружение.

Фаза всплытия

На фазе всплытия будут вызываться обработчики, которые были зарегистрированы через html-атрибут on{event}, свойство on{event} и метод addEventListener (с capture равным false или без его указания).

Целевой элемент

Целевой элемент доступен через event.target. Например, если стоит только один обработчик form.onclick, то он «поймает» все клики внутри формы. Где бы ни был клик внутри — он всплывёт до элемента <form>, на котором сработает обработчик. При этом внутри обработчика form.onclick:

this (=event.currentTarget) всегда будет элемент <form>, так как обработчик сработал на нем
event.target будет содержать ссылку на элемент внутри формы, на котором произошёл клик

Прекращение всплытия

Всплытие идёт с «целевого» элемента прямо наверх. По умолчанию событие будет всплывать до элемента <html>, а затем до объекта document, а иногда даже до window, вызывая все обработчики на своём пути. Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие — для этого нужно вызвать метод event.stopPropagation().

<body onclick="alert('Сюда всплытие не дойдёт')">
    <button onclick="event.stopPropagation()">Кликни меня</button>
</body>

Прекращение обработки

Если у элемента есть несколько обработчиков на одно событие, то даже при прекращении всплытия все они будут выполнены. То есть, event.stopPropagation() препятствует продвижению события дальше, но на текущем элементе все обработчики будут вызваны. Для того, чтобы полностью остановить обработку, существует метод event.stopImmediatePropagation(). Он не только предотвращает всплытие, но и останавливает обработку событий на текущем элементе.

Примечания

Если мы добавили обработчик вот так addEventListener(…, true), то мы должны передать то же значение аргумента capture в removeEventListener(…, true), когда снимаем обработчик.

Если у нас несколько обработчиков одного события, назначенных addEventListener на один элемент, в рамках одной фазы, то их порядок срабатывания — тот же, в котором они установлены.

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

Поиск: DOM • Frontend • HTML • JavaScript • Web-разработка • Событие • Теория • Event