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

Как события и их слушатели работают в javascript?

Событие: событие в javascript - это то, что происходит с элементами HTML.
Слушатель: Слушатель событий - это то, что слушает событие.

Это похоже на оплачиваемый детектив, который работает на своего босса, который следит за тем, что произойдет в развернутой области, и когда что-то происходит в его развернутой области, он сообщает своему боссу, а затем босс принимает меры.

Ниже приведены некоторые распространенные события javascript:
onclick, onchange, onmousemove, onload, onkeydown, onkeyup и т. Д.

Итак, чтобы понять, как работает событие? Давайте посмотрим на следующий HTML-код:

<!DOCKTYPE HTML>
<html>
   <head>
       <title>Event Bubbling</title>
   </head>
   <body>
      <ul class="fruits">
         <li id="apple">Apple</li>
      </ul>
   </body>
    <script>
          var apple = document.querySelector('#apple');
          apple.addEventListener('click', (event) => {
                 console.log(event.target.id);
          });
   </script>
</html>

В приведенном выше коде мы создали HTML-элемент <ul> и один ‹li id =” apple ”› Apple ‹/li›.
Теперь мы прикрепили к нему событие щелчка, используя ниже код:

var apple = document.querySelector('#apple');
apple.addEventListener('click', (event) => {
    console.log(event.target.id);
});
// To attach an event listener on an HTML elemet we use javascript's addEventListener() method.

Document.querySelector - это цель события, в этом случае мы нацелены на элемент HTML с идентификатором «яблоко». Мы можем настроить таргетинг на любой HTML-элемент в документе, мы можем настроить таргетинг на сам документ или окно. Но в целом это HTML-элемент.
Код

apple.addEventListener('click', (event) => {
    console.log(event.target.id);
});

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

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

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

Пузыри событий в javascript связаны с порядком распространения событий, в котором слушатели событий вызываются в случае вложенного элемента HTML, и все элементы зарегистрированы в прослушивателе событий с одинаковыми событиями (здесь мы будем использовать 'click event' .

Итак, для лучшего понимания, давайте посмотрим на HTML-код ниже:

index.html:

<!DOCKTYPE HTML>
<html>
  <head>
    <title>Event Bubbling</title>
  </head>
  
  <body>
    <div class="container">
      <ul class="fruits">
        <li class="apple">Apple</li>
      </ul>
    </div>
  </body>
  
  <script>
    var apple = document.querySelector('.container');
    apple.addEventListener('click', (event) => {
      console.log("container clicked");
    });
    var apple = document.querySelector('.fruits');
    apple.addEventListener('click', (event) => {
      console.log("fruits clicked");
    });
   var apple = document.querySelector('.apple');
    apple.addEventListener('click', (event) => {
      console.log("apple clicked");
    });
  </script>
</html>

В приведенном выше коде у нас есть вложенный элемент:

<div class="container">
      <ul class="fruits">
        <li class="apple">Apple</li>
      </ul>
</div>

Все элементы (Div, Ul, Li) могут быть зарегистрированы с помощью события «click».
Итак, в этом примере мы зарегистрировали 3 события щелчка для каждого элемента отдельно как:

// Attaching an event listener with HTML element which has the             class "container".
var apple = document.querySelector('.container');
apple.addEventListener('click', (event) => {
      console.log("container clicked");
});

// Attaching an event listener with HTML element which has the             class "apple".
var apple = document.querySelector('.apple');
apple.addEventListener('click', (event) => {
      console.log("apple clicked");
});
// Attaching an event listener with HTML element which has the             class "fruits".
var apple = document.querySelector('.fruits');
apple.addEventListener('click', (event) => {
      console.log("fruits clicked");
});

Давайте запустим код в браузере, откроем этот HTML-файл в браузере в open chrome dev tools и посмотрим на консоль:

Теперь нажимаем на «Apple» и видим консоль:

В этом случае, когда вы нажмете на «Apple», вы увидите, что все прикрепленные обработчики событий выполняются. Это означает, что когда вы щелкнули
‹li class =” apple ”› Apple ‹/li›
, он запускает собственное событие clicked, и поскольку этот элемент находится внутри элемента ‹ul› (а это также щелкнул автоматически), элемент ‹ul› также инициировал собственное событие clicked.
И поскольку элемент ‹ul› находится внутри элемента ‹div› (и он также щелкается автоматически), элемент ‹div› также запускает собственное событие щелчка .

Поток событий от внутреннего элемента к внешнему:

Этот процесс всплытия события называется всплыванием события,

Заключение :

Когда срабатывает событие X внутренних элементов, его слушатель прослушивает и выполняет свой метод обработчика, затем всплывает событие и запускается событие X внешнего / родительского элемента, затем слушатель слушает и выполняет свои обработчики.

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

Делегирование событий в javascript - повысьте производительность вашего приложения

Если вас интересует node.js, вам могут быть полезны следующие статьи:

Спасибо за чтение… Продолжайте читать… Продолжайте читать…