Делегирование событий - это метод добавления одного прослушивателя событий к родительскому элементу вместо добавления отдельного прослушивателя для каждого из дочерних элементов.
Делегирование событий пригодится, когда мы хотим аналогичного поведения для всех потомков элемента без добавления прослушивателя событий на все дочерние узлы. Это возможно из-за того, что каждое событие в элементе распространяется как вниз по цепочке к дочерним элементам, так и вверх по цепочке к родителям на всем пути к документу и окну .
Этот процесс распространения события вверх к родительскому объекту называется всплыванием, в то время как распространение события вниз на дочерние элементы называется перетеканием или захватом.
Каждый раз, когда нажимается любой элемент, событие распространяется в 3 фазы.
- Фаза захвата (нисходящая) - событие начинается в самой верхней иерархии, обычно это окно, документ, и проходит вниз по дереву DOM через предков элемента. (с 1 по 5)
- Целевая фаза - событие запускается для элемента, по которому выполняется щелчок. (Пункт 6)
- Фаза пузыря. Наконец, событие всплывает через предков элемента вплоть до документа и окна. (с 7 по 11)
По умолчанию прослушиватели событий не отслеживают фазу захвата, но мы можем указать поведение при создании прослушивателя событий.
element.addEventListener(eventType, handler[, captureOrOptions]);
Если третий аргумент истинен, то слушатель ожидает событий на фазе захвата. Если аргумент равен false, то прослушиватель фиксирует события целевой и пузырьковой фаз.
В показанном примере обратите внимание, как мы использовали один прослушиватель событий и фиксировали события на всех кнопках. В зависимости от того, какая кнопка была нажата, мы регистрируем I was clicked <buttonName>
. Это снова возможно из-за делегирования событий.
- На сегодня все