Для правильной обработки событий на разных стадиях их распространения можно использовать следующие подходы:
- Настройка слушателей событий. 1 Их можно настроить так, чтобы они работали либо в фазе захвата, либо в фазе всплытия, в зависимости от того, в какой фазе нужно перехватывать событие. 1
- Использование метода event.stopPropagation(). 1 Он останавливает дальнейшее распространение события, будь то в фазе захвата или всплытия. 1
- Делегирование событий. 2 Если есть много элементов, события которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому, можно поставить один обработчик на их общего предка. 2 Из него можно получить целевой элемент, понять, на каком именно потомке произошло событие, и обработать его. 2
Также для доступа к элементу, на котором произошло событие, можно использовать свойство target на объекте события, в котором хранится ссылка на целевой элемент. 2