Пузырьки событий и Сбор событий - это наиболее часто используемые термины в JavaScript во время потока событий. В JavaScript процесс потока событий завершается тремя концепциями:
- Запись событий.
- Цель события.
- Всплывающее сообщение о событии.
События :
События отвечают за взаимодействие JavaScript с веб-страницами HTML. Общее определение события - любое действие может произойти кем-то. В веб-разработке определение событий также такое же. События могут быть подписаны слушателями, что происходит только тогда, когда может быть запущено конкретное событие.
Базовый пример события - нажатие на кнопку
Поток событий:
Поток событий - это порядок, в котором событие поступает на веб-страницу. Если вы щелкните элемент, например div, или кнопку, которая вложена в другие элементы, до того, как будет выполнен щелчок по целевому элементу. Он должен сначала инициировать событие click для каждого из своих родительских элементов, начиная сверху с глобального объекта window
. По умолчанию каждый элемент HTML является дочерним по отношению к объекту window
.
История потока событий:
В четвертом поколении войны веб-браузеров основное сообщество браузеров, Internet Explorer 4 и Netscape Communicator 4 встретились друг с другом для поиска решения пути события поток. По сути, обе команды разработчиков встречались друг с другом, чтобы обсудить, какой путь больше подходит для Event Flow. Есть два способа: Сверху вниз (захват событий), а другой - Снизу вверх (всплытие событий). Но, к сожалению, оба они применяют противоположный подход. Internet Explorer 4 использует подход всплытия событий, а коммуникатор Netscape 4 использует подход захвата событий.
Пузырьки событий:
Событие всплытия - это событие начинается от самого глубокого элемента или целевого элемента до его родителей, а затем от всех его предков, которые движутся снизу вверх. В настоящее время во всех современных браузерах в качестве способа обработки событий по умолчанию используется восходящая цепочка событий.
Рассмотрим пример на всплытии событий:
Разработка кода:
- В приведенном выше коде мы можем создать html-файл с некоторой строкой HTML-кода и JavaScript-кода.
- В HTML мы можем создать div с родительским идентификатором. и его вложенный элемент кнопки с дочерним идентификатором.
- В коде Javascript, во-первых, мы можем назначить элемент html переменной с помощью функции
document.querySelector()
- После этого мы можем прикрепить событие щелчка к родительскому div и дочерней кнопке. и обе функции просто выводят значение строки на консоль с помощью
console.log()
. - Когда мы нажимаем на кнопку, сначала запускаем функцию, которая прикреплена к кнопке, после этого запускается
onclick()
функция div. Это связано с всплыванием событий. Сначала запустите событие, которое прикреплено к цели события, а затем его родители на пути к объектуwindow
.
Когда вы нажимаете кнопку, событие переходит от внутренней цели события (кнопка, идентификатор которой является дочерним) в Document. Прохождение события клика в следующем порядке:
<button>
<div>
<body>
<html>
document
Остановить всплытие событий:
Если вы хотите остановить всплытие событий, это можно сделать с помощью метода event.stopPropagation()
. Если вы хотите остановить поток событий от цели события к верхнему элементу в DOM, event.stopPropagation()
method останавливает событие, чтобы оно перемещалось снизу вверх.
Разработка кода:
- В приведенном выше коде мы можем создать html-файл с некоторой строкой HTML-кода и JavaScript-кода.
- В HTML мы можем создать div с родительским идентификатором. и его вложенный элемент кнопки с дочерним идентификатором.
- В коде Javascript, во-первых, мы можем назначить элемент html переменной с помощью функции
document.querySelector()
. - После этого мы можем прикрепить событие щелчка к родительскому div и дочерней кнопке. и обе функции просто выводят значение строки на консоль с помощью
console.log()
. - Еще одна задача состоит в том, что мы можем прикрепить
event.stopPropagation()
, чтобы остановить всплытие событий. В этом коде мы можем добавить кнопкуevent.stopPropagation()
with, чтобы остановить перемещение событияonclick
снизу вверх. Из-за этого, когда мы нажимаем на кнопку, консоль выводит только «дочерний клик». Событие не передается от цели события к документу веб-страницы.
Захват событий:
Сбор событий - это событие начинается от верхнего элемента к целевому. Современный браузер не поддерживает захват событий по умолчанию, но мы можем добиться этого с помощью кода на JavaScript.
Разработка кода:
- В приведенном выше коде мы можем создать html-файл с некоторой строкой HTML-кода и JavaScript-кода.
- В HTML мы можем создать div с родительским идентификатором. и его вложенный элемент кнопки с дочерним идентификатором.
- В коде Javascript, во-первых, мы можем назначить элемент html переменной с помощью
document.querySelector()
function - После этого мы можем прикрепить событие щелчка к родительскому div и дочерней кнопке. и обе функции просто выводят значение строки на консоль, используя
console.log()
. - Мы можем использовать третий необязательный аргумент addEventListner, чтобы установить true, чтобы включить захват событий в родительском div.
- Когда мы нажимаем на кнопку, сначала запускаем функцию, которая прикреплена к div, после этого запускается функция onclick кнопки. Это связано с захватом событий. Сначала запустите событие, которое прикреплено к родительскому элементу, а затем к цели события.
Когда вы нажимаете кнопку, событие переходит от родителя (документа) к цели события (кнопка, идентификатор которой является дочерним). Прохождение события клика в следующем порядке:
document
<html>
<body>
<div>
<button>
Полный обзор потока событий:
Каждый поток событий состоит из трех фаз:
- Захват событий
- Цель события
- Пузырьки событий.
В потоке событий цель события имеет две фазы: одна - в конце захвата события и в начале восходящей цепочки событий.
Вывод:
Пузырьки событий и захват событий - это основа обработчиков событий и делегирования событий в JavaScript. В этой статье мы можем дать концептуальные знания о восходящей цепочке событий и их захвате. Если у вас есть какие-либо сомнения, прокомментируйте ниже и напишите мне по адресу [email protected].