JavaScript свойство Event.eventPhase

Определение и применение

JavaScript свойство eventPhase объекта Event возвращает целое число, которое соответствует текущей фазе процесса распространения события. Свойство доступно только для чтения.

Следующие константы определяют значения свойства eventPhase:

Константа Значение Описание — Event.eventPhase
Константа Значение Описание
Event.NONE 0 В настоящее время ни одно событие не обрабатывается.
Event.CAPTURING_PHASE 1 Объект события распространяется через объекты предки целевого объекта (стадия перехвата). Этот процесс начинается с объекта Window, затем Document, затем HTMLHtmlElement и так далее проходя через все элементы до достижения родителя цели. Обработчики событий (прослушиватели) зарегистрированные для этой фазы вызываются в это время.
Event.AT_TARGET 2 Событие достигло целевого элемента - цели события (стадия цели). Обработчики событий (прослушиватели) зарегистрированные для этой фазы вызываются в это время. Если свойство bubbles объекта Event имеет значение false, то обработка события завершается после завершения этой фазы.
Event.BUBBLING_PHASE 3 Событие распространяется обратно через предков целевого объекта в обратном порядке, начиная с родительского объекта и в конечном итоге достигая объекта Window. Это называется стадией всплытия и происходит только когда свойство bubbles объекта Event имеет значение true. Обработчики событий (прослушиватели) зарегистрированные для этой фазы вызываются в это время.

Схематическое отображение события, отправленного в дереве DOM, с помощью потока событий DOM представлено ниже:

Схематическое отображение события, отправленного в дереве DOM.

Поддержка браузерами

Спецификация: dom.spec.whatwg

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьapi.Event.eventPhase
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
eventPhase✓1✓12✓1.5✓≤12.1✓1✓18✓4✓≤12.1✓1✓1.0✓4.4✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript
event.eventPhase;

Спецификация

DOM Standard.

Пример использования

Фазы перехвата, цели и всплытия

Нажмите ▶, затем кнопку в результате. В консоли появятся фазы 1, 2 и 3 в порядке перехвата, цели и всплытия, а после обработки — 0. Кликните по внешнему блоку вне кнопки и сравните: для самого блока фаза будет 2.

index.html
HTML
<div id="outer">
    Внешний блок
    <button id="inner">Нажми меня</button>
</div>
main.js
JavaScript
const outer = document.getElementById('outer')
const inner = document.getElementById('inner')
const phases = ['NONE', 'CAPTURING_PHASE', 'AT_TARGET', 'BUBBLING_PHASE']

function logPhase(event) {
    console.log(event.currentTarget.id + ': ' + event.eventPhase + ' (' + phases[event.eventPhase] + ')')
}

outer.addEventListener('click', logPhase, { capture: true }) // фаза перехвата: 1
inner.addEventListener('click', logPhase) // обработчик на самой цели: 2
outer.addEventListener('click', logPhase) // фаза всплытия: 3

inner.addEventListener('click', function (event) {
    setTimeout(() => console.log('после обработки: ' + event.eventPhase), 0) // событие уже не обрабатывается: 0
})

В этом примере для внешнего блока зарегистрированы два обработчика события click: один в фазе перехвата (параметр capture: true), другой в фазе всплытия. Обработчик кнопки вызывается в фазе цели. Каждый обработчик выводит значение eventPhase и имя соответствующей константы. После завершения обработки свойство возвращает 0 (Event.NONE).

Фаза на цели и отмена события

Нажмите кнопку и сравните фазы 1, 2, 2, 3. Затем измените bubbles или cancelable: отмена действия не останавливает распространение.

index.html
HTML
<div id="parent"><button id="target" type="button">Отправить событие</button></div>
<pre id="result" aria-live="polite"></pre>
main.js
JavaScript
const target = document.querySelector('#target')
const parent = document.querySelector('#parent')
const result = document.querySelector('#result')
function log(label, event) {
    result.textContent += label + ': фаза ' + event.eventPhase + '\n'
}
parent.addEventListener('check', (event) => log('Предок, capture', event), true)
target.addEventListener('check', (event) => log('Цель, capture', event), true)
target.addEventListener('check', (event) => {
    log('Цель, обычный обработчик', event)
    event.preventDefault()
})
parent.addEventListener('check', (event) => log('Предок, всплытие', event))
target.addEventListener('click', () => {
    result.textContent = 'До dispatchEvent\n'
    const event = new Event('check', { bubbles: true, cancelable: true })
    const accepted = target.dispatchEvent(event)
    result.textContent += 'После dispatchEvent: ' + accepted + '\n'
    result.textContent += 'Действие отменено: ' + event.defaultPrevented
})