Пузырьки событий и Сбор событий - это наиболее часто используемые термины в JavaScript во время потока событий. В JavaScript процесс потока событий завершается тремя концепциями:

  1. Запись событий.
  2. Цель события.
  3. Всплывающее сообщение о событии.

События :

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

Базовый пример события - нажатие на кнопку

Поток событий:

Поток событий - это порядок, в котором событие поступает на веб-страницу. Если вы щелкните элемент, например div, или кнопку, которая вложена в другие элементы, до того, как будет выполнен щелчок по целевому элементу. Он должен сначала инициировать событие click для каждого из своих родительских элементов, начиная сверху с глобального объекта window. По умолчанию каждый элемент HTML является дочерним по отношению к объекту window.

История потока событий:

В четвертом поколении войны веб-браузеров основное сообщество браузеров, Internet Explorer 4 и Netscape Communicator 4 встретились друг с другом для поиска решения пути события поток. По сути, обе команды разработчиков встречались друг с другом, чтобы обсудить, какой путь больше подходит для Event Flow. Есть два способа: Сверху вниз (захват событий), а другой - Снизу вверх (всплытие событий). Но, к сожалению, оба они применяют противоположный подход. Internet Explorer 4 использует подход всплытия событий, а коммуникатор Netscape 4 использует подход захвата событий.

Пузырьки событий:

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

Рассмотрим пример на всплытии событий:

Разработка кода:

  1. В приведенном выше коде мы можем создать html-файл с некоторой строкой HTML-кода и JavaScript-кода.
  2. В HTML мы можем создать div с родительским идентификатором. и его вложенный элемент кнопки с дочерним идентификатором.
  3. В коде Javascript, во-первых, мы можем назначить элемент html переменной с помощью функции document.querySelector()
  4. После этого мы можем прикрепить событие щелчка к родительскому div и дочерней кнопке. и обе функции просто выводят значение строки на консоль с помощью console.log().
  5. Когда мы нажимаем на кнопку, сначала запускаем функцию, которая прикреплена к кнопке, после этого запускается onclick() функция div. Это связано с всплыванием событий. Сначала запустите событие, которое прикреплено к цели события, а затем его родители на пути к объекту window.

Когда вы нажимаете кнопку, событие переходит от внутренней цели события (кнопка, идентификатор которой является дочерним) в Document. Прохождение события клика в следующем порядке:

  1. <button>
  2. <div>
  3. <body>
  4. <html>
  5. document

Остановить всплытие событий:

Если вы хотите остановить всплытие событий, это можно сделать с помощью метода event.stopPropagation(). Если вы хотите остановить поток событий от цели события к верхнему элементу в DOM, event.stopPropagation() method останавливает событие, чтобы оно перемещалось снизу вверх.

Разработка кода:

  1. В приведенном выше коде мы можем создать html-файл с некоторой строкой HTML-кода и JavaScript-кода.
  2. В HTML мы можем создать div с родительским идентификатором. и его вложенный элемент кнопки с дочерним идентификатором.
  3. В коде Javascript, во-первых, мы можем назначить элемент html переменной с помощью функции document.querySelector().
  4. После этого мы можем прикрепить событие щелчка к родительскому div и дочерней кнопке. и обе функции просто выводят значение строки на консоль с помощью console.log().
  5. Еще одна задача состоит в том, что мы можем прикрепить event.stopPropagation(), чтобы остановить всплытие событий. В этом коде мы можем добавить кнопку event.stopPropagation() with, чтобы остановить перемещение события onclick снизу вверх. Из-за этого, когда мы нажимаем на кнопку, консоль выводит только «дочерний клик». Событие не передается от цели события к документу веб-страницы.

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

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

Разработка кода:

  1. В приведенном выше коде мы можем создать html-файл с некоторой строкой HTML-кода и JavaScript-кода.
  2. В HTML мы можем создать div с родительским идентификатором. и его вложенный элемент кнопки с дочерним идентификатором.
  3. В коде Javascript, во-первых, мы можем назначить элемент html переменной с помощью document.querySelector()function
  4. После этого мы можем прикрепить событие щелчка к родительскому div и дочерней кнопке. и обе функции просто выводят значение строки на консоль, используя console.log().
  5. Мы можем использовать третий необязательный аргумент addEventListner, чтобы установить true, чтобы включить захват событий в родительском div.
  6. Когда мы нажимаем на кнопку, сначала запускаем функцию, которая прикреплена к div, после этого запускается функция onclick кнопки. Это связано с захватом событий. Сначала запустите событие, которое прикреплено к родительскому элементу, а затем к цели события.

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

  1. document
  2. <html>
  3. <body>
  4. <div>
  5. <button>

Полный обзор потока событий:

Каждый поток событий состоит из трех фаз:

  1. Захват событий
  2. Цель события
  3. Пузырьки событий.

В потоке событий цель события имеет две фазы: одна - в конце захвата события и в начале восходящей цепочки событий.

Вывод:

Пузырьки событий и захват событий - это основа обработчиков событий и делегирования событий в JavaScript. В этой статье мы можем дать концептуальные знания о восходящей цепочке событий и их захвате. Если у вас есть какие-либо сомнения, прокомментируйте ниже и напишите мне по адресу [email protected].