Делегирование событий – это шаблон обработки событий, который включает всплывающую подсказку и захват событий.
const container = document.querySelector('#container');container.addEventListener('click', (event) => { event.traget.style.background = 'red'; }
Когда event запускается на element с parent elements, современные браузеры выполняют три разных этапа — этап захвата, этап целевого и этап пузырькового поиска фаза.
События всплывают из самого внутреннего элемента, по которому был сделан щелчок. В то время как захват делает обратное.
На этапе захвата события передаются сверху к целевому элементу.
ОКНО → ДОКУМЕНТ → HTML → ТЕЛО → ФОРМА → DIV → КНОПКА
element.addEventListener(…, {capture: true});
В целевой фазе событие достигло элемента. Это не обрабатывается отдельно, обработчики на фазах захвата и всплытия срабатывают на этой фазе.
В фазе пузырькового события передаются от целевого элемента вверх.
DIV → ФОРМА → ТЕЛО → HTML → ДОКУМЕНТ → ОКНО
element.addEventListener(…, {capture: true});
element.addEventListener(…); // capture is false by default
event.target— относится к элементу DOM, вызвавшему событие.
event.eventPhase— возвращает текущую фазу распространения события (захват: 1, цель: 2, всплытие: 3)
event.currentTarget— (=this) относится к текущему элементу DOM, который обрабатывает событие.
Event слушателей, зарегистрированных для <html> элементов, не находятся на вершине иерархии. Слушатели Event, зарегистрированные для объектов window и document, находятся выше в иерархии.
Стандартный объект Event имеет доступную для него функцию, называемую event.stopPropagation, которая при вызове объекта события обработчика делает так, что первый обработчик запускается, но event не поднимается вверх по цепочке, поэтому больше обработчиков не будет. бегать. Не все event всплывают (например, focus).
Events не являются частью основного JavaScript — они определены в веб-API браузера.
Ссылки:
