Захват событий

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

Всплывание событий и захват событий — это два способа обработки событий в DOM, или, точнее, два метода распространения событий в DOM.

При всплытии событие сначала захватывается и обрабатывается самым внутренним элементом, а затем распространяется на внешние элементы.

При захвате событие сначала захватывается самым внешним элементом и распространяется на внутренние элементы.

Пузырьковое событие

Вышеупомянутое является формальным определением, которое, я считаю, вам не нужно запоминать, потому что мы увидим все в коде, поэтому он автоматически запомнится вам.

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

<div id="ansector">
  Ansector
  <div id="parent">
    Parent
    <div id="child">Child</div>
  </div>
</div>
#ansector {
  background-color: red;
}
#parent {
  background-color: green;
}
#child {
  background-color: blue;
}
#ansector, #parent, #child {
  padding: 20px;
}
const ansector = document.getElementById("ansector");
const parent= document.getElementById("parent");
const child= document.getElementById("child");

ansector.addEventListener("click", () => {
  console.log("Ansector is calling");
});

parent.addEventListener("click", () => {
  console.log("Parent is calling");
});

child.addEventListener("click", () => {
  console.log("Child is calling");
});

Таким образом, приведенный выше код представляет собой довольно простой код, в котором я только что создал 3 элемента div и применил некоторые стили, чтобы при графическом запуске этого кода вы могли легко определить элементы div. Затем я записал некоторый код javascript, где мы просто утешаем что-то в консоли всякий раз, когда нажимаем на этот div.

Итак, что в идеале должно быть на выходе этого кода? Есть предположения?

Хорошо! поэтому в идеале он должен печатать каждый оператор консоли всякий раз, когда мы нажимаем на определенный div, например, если мы нажимаем на родительский div, он будет печатать «Prent is consoles», и то же самое с другими div.

Но здесь у нас есть небольшой поворот, на самом деле вывод будет примерно таким:

При нажатии на дочерний элемент div будет выводиться следующее:
Звонит ребенок
Звонит родитель
Звонит Ansector

При нажатии на родительский элемент div вывод будет таким:
Родитель звонит
Ansector звонит

При нажатии на div ansector вывод будет таким:
Ansector вызывает

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

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

const ansector = document.getElementById("ansector");
const parent= document.getElementById("parent");
const child= document.getElementById("child");

ansector.addEventListener("click", () => {
  console.log("Ansector is calling");
});

parent.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("Parent is calling");
});

child.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("Child is calling");
});

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

При нажатии на дочерний элемент div вывод будет таким:
Ребенок звонит

При нажатии на родительский элемент div вывод будет таким:
Родитель звонит

При нажатии на div ansector вывод будет таким:
Ansector вызывает

Захват событий также является похожей концепцией, если вы поняли концепцию пузырькового всплытия событий, теперь она для вас очень проста. Таким образом, при всплытии событие начинает захват от самого внутреннего элемента к самому внешнему, это прямо противоположно всплыванию, «событие распространяется от самого внешнего элемента div к самому внутреннему элементу div».

Итак, возьмем тот же код с небольшим изменением,

const ansector = document.getElementById("ansector");
const parent= document.getElementById("parent");
const child= document.getElementById("child");

ansector.addEventListener("click", () => {
  console.log("Ansector is calling");
}, true);

parent.addEventListener("click", () => {
  console.log("Parent is calling");
}, true);

child.addEventListener("click", () => {
  console.log("Child is calling");
}, true);

Итак, теперь я добавил здесь логическое значение true, которое будет указывать, что на этот раз вы должны следовать методу захвата событий при запуске событий, поэтому теперь выходные данные будут примерно такими:

При нажатии на дочерний элемент div будет выводиться следующее:
Звонит Ansector
Звонит родитель
Звонит ребенок

При нажатии на родительский элемент div будет выводиться следующее:
Ansector is call
Parent is call

При нажатии на div ansector вывод будет таким:
Ansector вызывает

По умолчанию он следует за всплытием событий, поэтому вы не передаете какое-либо значение в третьем параметре addEventListener, он примет false в качестве значения по умолчанию, а false означает, что он будет следовать за всплытием событий, и если вы передадите там true, он начнет вести себя в соответствии с перехватом событий.

И так же, как всплывающее окно событий, вы можете остановить распространение событий, используя метод stopPropagation().

Предотвратить дефолт

PreventDefault просто помогает элементу избежать поведения по умолчанию. Давайте поймем это, посмотрев на приведенный ниже код,

<a href="https://www.google.com" id="google">I am Google</a>
const google = document.getElementById("google");

google.addEventListener("click", () => {
  console.log("I am clicked");
});

Глядя на приведенный выше код, вы можете легко понять, что будет выводом, поэтому вывод будет «Я нажал», а затем он будет перенаправлен на google.com, поскольку поведение этого элемента по умолчанию перемещается куда-то. Вы знаете, что теги привязки имеют некоторое поведение по умолчанию, но по какой-то причине вы хотите остановить его поведение по умолчанию, и вы просто вызываете его событие клика, и вы не хотите, чтобы он переходил на google.com. Как мы можем этого добиться?

Здесь появляется функция preventDefault(), поэтому с помощью preventDefault() вы можете предотвратить поведение по умолчанию элемента, который в нашем случае перенаправляет на google.com и просто выводит сообщение «Меня нажали». Используя тот же код, давайте посмотрим, как это выглядит,

const google = document.getElementById("google");

google.addEventListener("click", (e) => {
  e.preventDefault();
  console.log("I am clicked");
});

Он также будет доступен внутри события, поэтому вы можете легко получить доступ к функции preventDefault(), и теперь вывод будет «Я нажал», и он не будет перемещен на google.com.

Это все о всплытии событий, захвате событий, StopPropagation и PreventDefault. Я надеюсь, что это будет полезно для вас.

Приятного обучения 😊

Захват событий | Пузырьковое событие | остановить распространение | preventDefault — все, что вам нужно знать

Пузырьковое событие

Захват событий

Предотвратить дефолт

Похожие вопросы