Всплытие и захват событий

Всплытие и захват событий

Наши соц. сети: instagram, fb, tg

JS позволяет добавлять страницам интерактивности. Эта интерактивность - не что иное, как набор событий, которым подвергаются элементы HTML. Событием может быть действие пользователя или браузера. Они говорят нам, что произошло какое-то изменение и где оно произошло. Это может быть событие onClick, указывающее на то, что пользователь кликнул по кнопке. Или это может быть событие onSubmit, в котором говорится, что форма была отправлена. От того, насколько хорошо обрабатываются эти события, зависит, насколько удобна веб-страница. Всплытие и захват - это две фазы распространения событий. Распространение событий - это порядок, в котором эти события поступают на веб-страницу. В Javascript поток событий проходит в три этапа:

Фаза захвата

Целевая фаза

Фаза всплытия

scheme

Это распространение является двунаправленным, от window к цели и обратно.

Всплытие

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

Давайте разберемся на примере:


❮body❯ ❮div id="grandparent"❯ ❮p❯Grandparent❮/p❯ ❮div id="parent"> ❮p❯Parent❮/p❯ ❮div id="child"> ❮p❯Child❮/p❯ ❮/div❯ ❮/div❯ ❮/div❯ ❮button onClick="history.go(0)"❯ Reset Elements ❮/button❯ ❮/body❯

В нашем HTML-файле мы берем 3 блока, вложенных один в другой, и даем им идентификаторы дочерних, родительских и тд, начиная с самого внутреннего блока.

Добавим немного CSS:

div {

min-width: 75px; min-height: 75px; padding: 25px; border: 1px solid black;

} button {

margin-top: 20px; width: 200px; font-size: 14px; padding: 10px;

}

И установим событие click для каждого из трех div в нашем файле JS.

document.querySelector("#grandparent").addEventListener("click", () => {
  document.querySelector("#grandparent > p").textContent =
    "Grandparent Clicked!";
  console.log("Grandparent Clicked");
});

Приведенный выше код будет работать следующим образом


bubbling

Обратите внимание, как даже при щелчке по дочернему элементу div также запускаются обработчики всех его предков.

Хотя здесь важнее то, как происходит распространение событий. Он начинается с самого внутреннего элемента, то есть с дочернего элемента div, а затем распространяется вверх по иерархии, в конечном итоге достигая родительских и прародительских div (строго в этом порядке).

Захват

Принцип захвата - полная противоположность всплытию. В захвате событий распространение события происходит от самого внешнего элемента к самому внутреннему элементу. Захват событий иногда также называют просачиванием событий.

Мы часто используем addEventListener() при работе с Javascript, в котором мы обычно передаем два параметра - событие и колбэк функция. Функция addEventListener () также принимает третий скрытый параметр useCapture. Если установить его значение false, наши события будут распространяться по принципу всплытия. Установка значения true заставит их распространяться сверху вниз, то есть с захватом. Чтобы реализовать захват событий, мы внесем несколько небольших изменений в наш код JS:

document.querySelector("#grandparent").addEventListener("click", () => {
  document.querySelector("#grandparent > p").textContent =
    "Grandparent Clicked!";
  console.log("Grandparent Clicked");
},true); // useCapture parameter is now set to true

document.querySelector("#parent").addEventListener("click", () => {
  document.querySelector("#parent > p").textContent = "Parent Clicked!";
  console.log("Parent Clicked");
},true); // useCapture теперь true

document.querySelector("#child").addEventListener("click", () => {
  document.querySelector("#child > p").textContent = "Child Clicked!";
  console.log("Child Clicked");
}, true); // useCapture теперь true


Теперь наш код будет работать следующим образом:


capture

Обратите внимание, как поток событий теперь распространяется от самого внешнего элемента к самому внутреннему элементу.

В сухом остатке:

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

Приятного кодинга!