Событие — это сигнал о том, что что-то произошло. Пользователь мог щелкнуть кнопку, нажать клавишу или отпустить клавишу с клавиатуры в тексте, сфокусировать текстовое поле, щелкнув его и т. д.,

Мы можем рассмотреть приведенный ниже пример,

При нажатии элемента кнопки в выводе будут отображаться предупреждения "Нажатие кнопки", "Нажатие дочернего элемента", "Нажатие родительского элемента", "Клик по телу"

Почему вместо вызова функции нажатия кнопки вызываются все функции нажатия кнопки?

Это называется Всплывание событий. Всякий раз, когда событие, такое как onclick, запускается в дочернем элементе внутри родительского элемента или вложенных родительских элементов, JavaScript по умолчанию вызывает события щелчка родительского элемента. также.

Как мы можем остановить это поведение?

Мы можем остановить это поведение, используя метод в объекте события, который называется stopPropogation(). Всякий раз, когда мы вызываем этот метод, он останавливает поведение JS по умолчанию.

В нашем случае события всплывают, поэтому, если мы вызовем это с помощью функции onclick кнопки, это остановит распространение событий.

Но это не конец, событие JavaScript состоит из трех фаз,

· Фаза захвата

· Целевая фаза

· Фаза бульканья

Фаза захвата:

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

Подобно тому, как события всплывают после того, как пользователь создал событие, фазы захвата выполняют методы обработчика событий до того, как целевой элемент (элемент, щелкнутый пользователем) выполняется на всем пути от родительского элемента до целевого элемента

Например:

По умолчанию захват события имеет значение false, но мы можем установить его в значение true, используя третий объект в функции addEventListener().

Приведенные ниже прослушиватели событий будут вызываться перед событием щелчка целевого элемента и нашими функциями onclick, размещенными в html.

Вывод приведенного выше скрипта будет следующим: «Клик по телу — Захват», «Клик по родительскому элементу — Захват», «Клик по дочернему элементу — Захват», «Клик по кнопке — Захват» .

Если мы объединим наш предыдущий код всплытия и этот код захвата, общий код будет выглядеть так:

Выход:

Захват:

"Нажатие основной части — захват", "Родительский клик – захват", "Дочерний клик – захват", "Нажатие кнопки — захват"

Всплывающие:

«Нажатие кнопки — всплывающее окно», «Нажатие дочернего элемента — всплывающее окно», «Нажатие родительского элемента — всплывающее окно», «Нажатие основной части — всплывающее окно»

Как вы видите в приведенном выше коде, функция клика целевого элемента выполняется дважды в фазе захвата и фазе всплытия, по умолчанию JavaScript разрешает только всплытие, и нам нужно вручную установить захват в значение true в функциях прослушивателя событий. Таким образом, мы видим только один вызов функции всякий раз, когда мы создаем событие, но есть эти фазы, которые скрыты от наших глаз!!

Примечание. Почти все события отображаются в виде кружков JavaScript. Но, например, событие фокуса не всплывает.

Удачного кодирования!!!