В этой статье вы узнаете, как мы прикрепляем 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, вам могут быть полезны следующие статьи:
- Создайте График Пламени для вашего приложения узла | Профилирование приложения nodeJS
- Обнаружение утечки памяти в вашем приложении Node | Приложение узла профилирования
- Определить использование памяти приложением узла
- Создайте дамп кучи V8 и проверьте его для своего приложения узла
Спасибо за чтение… Продолжайте читать… Продолжайте читать…