Есть много причуд с манипулированием DOM Javascript. Одна из самых причудливых особенностей, с которыми сталкивается начинающий программист в своем стремлении к знаниям, — это концепция всплытия событий. Это относится к порядку, в котором вызываются элементы события, когда один элемент вложен в другой элемент. Например, когда я впервые использовал React для проекта, я попытался сделать скрытую карточку, внутри которой был еще один скрываемый элемент сведений. Но когда я добавляю прослушиватели кликов к обоим элементам, щелчок по вложенному элементу будет запускать оба прослушивателя и каждый раз скрывать все это.
Ситуация, которую я наблюдал в своем первом проекте React, называлась распространение событий и связана со способом обработки событий в дереве DOM. Но прежде чем мы перейдем непосредственно к распространению событий, лучше всего получить объяснение того, что такое структура данных DOM — дерево — и для чего она используется.
Что такое и почему дерево?
Дерево в этом смысле представляет собой иерархический тип данных, у которого есть корневой узел, соединенный с поддеревьями узлов, называемых дочерними элементами. Этот тип данных лучше всего использовать с приложениями, которые требуют делегирования задач от одного корневого элемента к его подчиненным элементам в иерархическом порядке, подобном корпоративной структуре.
Есть шесть терминов, которые нужно знать при работе с деревьями.
Корневой – самый высокий родительский узел. Это дочерний элемент ни для кого и родительский для всех остальных узлов.
Link или Edge — это ссылка, которая используется для связи родительского узла с дочерним.
Дочерний — это узел, следующий за родительским узлом, к которому он подключен.
Родительский – это верхний узел, связанный с дочерним узлом.
Родственные узлы – это любая группа узлов, являющихся дочерними элементами одного и того же родительского узла.
А Leaf — это любой узел, у которого нет дочерних узлов.
Так почему же события все равно распространяются?
Термин «распространение событий» — это всеобъемлющая фраза, используемая для описания как пузырькового (когда порядок событий распространяется вверх к корню), так и захвата (тогда порядок событий распространяется вниз к концам). ). Оба из них имеют решающее значение для функционирования DOM.
Распространение события можно разбить на три этапа.
- Фаза захвата: когда событие движется вниз к цели.
- Целевая фаза: когда событие достигает цели.
- Фаза всплытия: когда событие перемещается обратно вверх к окну.
Приятно отметить, что, хотя все события будут течь вниз от окна, чтобы добраться до цели, некоторые события (фокус, размытие, загрузка и т. д.) на самом деле вообще не попадут в фазу всплытия.
Но помните, дерево DOM иерархично по своей природе. Поэтому, если событию необходимо получить значение от цели, оно всегда должно возвращаться к корню DOM (окну).
И это все! Эффекты распространения событий довольно странные, но основные понятия на самом деле довольно просты!
