Even propagation/ preventing Flashcards
Delegating
Если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому, мы ставим один обработчик на их общего предка.
Из него можно получить целевой элемент event.target, понять на каком именно потомке произошло событие и обработать его.
Delegating “Behavior”
Приём проектирования «поведение» состоит из двух частей:
- Элементу ставится пользовательский атрибут, описывающий его поведение.
- При помощи делегирования ставится обработчик на документ, который ловит нужные события и, если элемент имеет нужный атрибут, производит соответствующее действие.
Delegating confines
У делегирования событий есть свои ограничения:
1. Событие должно всплывать. Некоторые события этого не делают. Также, низкоуровневые обработчики не должны вызывать event.stopPropagation().
2. Делегирование создаёт дополнительную нагрузку на браузер, ведь обработчик запускается, когда событие происходит в любом месте контейнера, не обязательно на элементах, которые нам интересны. Но обычно эта нагрузка настолько пустяковая, что её даже не стоит принимать во внимание.
Event.stopPropagation()
По умолчанию событие будет всплывать до элемента <html>, а затем до объекта document, а иногда даже до window, вызывая все обработчики на своём пути.
Этот метод, прекращающий дальнейшую передачу текущего события.
Однако метод не предотвращает любое поведение по умолчанию; например, клики по ссылкам все еще обрабатываются.
Он также не предотвращает работу других обработчиков события текущего элемента.
Зачастую прекращение всплытия имеет свои подводные камни, которые со временем могут стать проблемами.
Event.stopImmediatePropagation()
Если у элемента есть несколько обработчиков на одно событие, то даже при прекращении всплытия все они будут выполнены.
Этот метод не только предотвращает всплытие, но и останавливает обработку всех событий на текущем элементе.
Если несколько слушателей подключены к одному и тому же элементу для одного и того же типа события, они вызываются в том порядке, в котором они были добавлены. Если во время одного такого вызова вызывается этот метод, никакие оставшиеся слушатели не сработают ни на этом, ни на любом другом элементе.
preventDefault()
Этот метод сообщает user агенту, что если событие не обрабатывается явно, его действие по умолчанию не должно отрабатывать так, как обычно.
При этом событие продолжает свой цикл, если другие методы не мешают этому.
Вызов этого метода для неотменяемого события, например, отправленного через EventTarget.dispatchEvent(), без указания cancelable: true не имеет никакого эффекта.
