Порядок вызова событий поменятлся?
Помню, что при наличии нескольких обработчиков событий на элементе в том случае, когда он является целевым (т. е. фаза 2 - targeting), обработчики вызывались подряд в порядке добавления независимо от того, на какую фазу они подписаны (capturing или bubbling).
Но сейчас при запуске вот такого кода и нажатии на кнопку
var btn = document.querySelector('button')
btn.addEventListener('click', e => console.log(e.eventPhase, 'Bubbling 1'))
btn.addEventListener('click', e => console.log(e.eventPhase, 'Capturing 1'), true)
btn.addEventListener('click', e => console.log(e.eventPhase, 'Bubbling 2'))
btn.addEventListener('click', e => console.log(e.eventPhase, 'Capturing 2'), true)
<button>Click me</button>
Chrome 93.0.4577.63 выводит
2 Capturing 1
2 Capturing 2
2 Bubbling 1
2 Bubbling 2
В то время, как Firefox 92.0 показывает
2 Bubbling 1
2 Capturing 1
2 Bubbling 2
2 Capturing 2
Кто из них прав и почему в Хроме поменялось поведение с тех пор, как я проверял в прошлый раз? Неужели поменяли спецификацию?
PS: Но вообще, новый вариант кажется гораздо более логичным - меня раньше удивляло, что было сделано наоборот.
Ответы (1 шт):
В спецификации (пункт 1.2.1) написано, что порядок выполнение одних обработчиков относительно других никак не регулируется спецификацией.
Although all EventListeners on the EventTarget are guaranteed to be triggered by any event which is received by that EventTarget, no specification is made as to the order in which they will receive the event with regards to the other EventListeners on the EventTarget.
https://www.w3.org/TR/DOM-Level-2-Events/#events-Events-flow