Когда я впервые услышал о всплывании событий, я понял его суть, но недостаточно, чтобы использовать его на практике. Возврат событий - это порядок, в котором вызываются обработчики событий, когда один элемент вложен во второй элемент, и оба этих элемента имеют зарегистрированный прослушиватель для одного и того же события (например, событие щелчка).

Пузырьков событий часто упоминается с захватом событий и распространением событий, 2 концепции, которые я также не имел полного представления. Чтобы лучше разбираться в событиях Javascript, важно понимать все три концепции.

Распространение событий - это общий термин как для восходящей, так и для восходящей цепочки событий. Рассмотрим пример кликабельных изображений:

Щелкнув элемент ‹img›, он сгенерирует событие щелчка не только для элемента ‹img›, но также и для его родительского элемента ‹a›, а также для его родительского элемента ‹li› и так далее. Он будет идти до конца, пока не закончится на оконном объекте. Элемент ‹img› - это цель события или самый внутренний элемент, из которого произошел щелчок. Таким образом, поток события идет от:

img → a → li → ul → div → body → html → документ → окно.

Эта ветвь важна, потому что это путь, по которому событие распространяется или течет. Это распространение является двунаправленным, от окна к цели события и затем обратно. Его можно разделить на три этапа.

  • Фаза захвата: от окна к родительскому объекту целевого события
  • Целевая фаза: сама цель события.
  • Фаза пузыря: от родительского объекта целевого события до окна

Эти фазы отличает типы вызываемых прослушивателей событий.

Во время фазы захвата событий вызываются только прослушиватели событий capturer. Это прослушиватели событий, которые были зарегистрированы со значением true для третьего параметра .addEventListener ().

Если третий параметр опущен, значение по умолчанию - false, и прослушиватель событий не считается захватчиком.

Во время фазы цели события вызываются все прослушиватели событий, зарегистрированные для цели события. Все они вызываются независимо от значения их флага захвата.

Наконец, во время фазы всплытия событий вызываются все другие прослушиватели событий, у которых нет третьего параметра true в функции addEventListener. В конце распространения каждый прослушиватель событий будет вызываться только один раз.

Два метода, которые часто используются при распространении, - это event.stopPropagation () и event.preventDefault (). С помощью event.stopPropagation () все прослушиватели событий, зарегистрированные на узлах на пути распространения, следующих за целью события, не будут вызываться. Все остальные оставшиеся прослушиватели, прикрепленные к цели события, все равно получат событие.

С помощью event.preventDefault () он останавливает действие по умолчанию, которое браузер выполняет в конце распространения. Например, когда форма отправляется, браузер обычно вызывает повторную визуализацию или переходит на новую страницу. Вызывая event.preventDefault, он останавливает повторный рендеринг.

Javascript - очень мощный язык, использующий прослушиватели событий. Понимание потока / пути этих слушателей жизненно важно для того, чтобы стать опытным разработчиком Javascript!