Разбиране на разпространението на събития в JavaScript

Събитията в JavaScript действат като известия, че е извършено взаимодействие с потребител или друго действие. Например, когато щракнете върху бутон на формуляр, вашият браузър генерира събитие, което показва, че това се е случило. Въвеждането в полето за търсене също предизвиква събития и по този начин автоматичното предлагане често работи онлайн.

В JavaScript събитията, които включват взаимодействие с потребителя, обикновено се задействат срещу определени елементи. Например, щракването върху бутон предизвиква събитие срещу този бутон. Но събитията също се разпространяват: те стрелят срещу други елементи в йерархията на документите.

Прочетете, за да научите всичко за разпространението на събития и наличните два различни типа.

Какво представлява обработката на събития в JavaScript?

Можете да използвате JavaScript код, за да улавяте и да отговаряте на събития, които дадена уеб страница повдига. Можете да направите това, за да отмените поведението по подразбиране или да предприемете действия, когато не съществува подразбиране. Често срещан пример е валидирането на формуляра. Обработката на събития ви позволява да прекъснете нормалния процес на подаване на формуляр.

Помислете за този пример:

Кликнете върху мен

Горният код има бутонен елемент с идентификатор, наречен бутон. Той има слушател на събитие за щракване, който показва предупреждение със съобщението Здравей свят.

Какво представлява разпространението на събития?

Разпространението на събитията описва реда, в който събитията преминават през DOM дърво когато уеб браузърът ги задейства.

Да приемем, че има маркер за формуляр вътре в таг div и и двата имат слушатели на събития onclick. Разпространението на събитието описва как един слушател на събитие може да задейства след друг.

Има два вида размножаване:

1. Бутониране на събития, при което събитията бълбукат нагоре, от дете към родител.
2. Улавяне на събития, чрез което събитията се движат надолу, от родител към дете.

Какво представлява бълбукането на събития в JavaScript?

Бутониране на събитие означава, че посоката на разпространение на събитието ще бъде от дъщерния елемент към неговия родителски елемент.

Помислете за следния пример. Той има три вложени елемента: div, form и бутон. Всеки елемент има a щракнете слушател на събитие. Браузърът показва тревога със съобщение, когато щракнете върху всеки елемент.

По подразбиране редът, в който уеб браузърът показва сигнали, ще бъде бутон, формуляр, след това div. Събитията се прехвърлят от дете на родител.

 раздел


 форма 



 Бутон

Какво представлява заснемането на събития?

При улавянето на събития редът на разпространение е противоположен на бълбукането. Иначе концепцията е идентична. Единствената разлика със заснемането е, че събитията се случват от родител на дете. За разлика от предишния пример, със заснемането на събития, браузърът ще показва сигнали в този ред: div, формуляр и бутон.

За да постигнете улавяне на събития, трябва да направите само една промяна в кода. Вторият параметър на addEventListener() определя вида на разпространение. По подразбиране е невярно, за да представлява бълбукане. За да активирате улавянето на събития, трябва да зададете втория параметър на true.

 div.addEventListener("клик", ()=>{
 предупреждение ("div")
 }, вярно);
 form.addEventListener("клик", ()=>{
 сигнал ("формуляр")
 }, вярно);
 button.addEventListener("клик", ()=>{
 предупреждение ("бутон")
 }, вярно);

Как можете да предотвратите разпространението на събития?

Можете да спрете разпространението на събития с помощта на stopPropagation() метод. В addEventListener() методът приема име на събитие и функция манипулатор. Манипулаторът приема обект на събитие като свой параметър. Този обект съдържа цялата информация за събитието.

Когато извикате stopPropagation() метод, събитието ще спре да се разпространява от тази точка. Например, когато използвате stopPropagation() на елемента на формуляра събитията ще спрат да се появяват до div. Ако щракнете върху бутона, ще видите събития, повдигнати върху бутона и формуляра, но не и div.

form.addEventListener("клик", (e)=>{
e.stopPropagation();
 предупреждение("формуляр");
});

Свързани: The Ultimate JavaScript Cheat Sheet

JavaScript има много сила под капака

Обработката на събития в JavaScript е мощна, сравнима с много пълноценни езици на интерфейса. Когато разработвате интерактивни уеб приложения, това е жизненоважна част от вашата кутия с инструменти. Но има много други напреднали теми, които да разберете. За професионални разработчици на JavaScript има какво да научат!

Ако искате да се научите да кодирате JavaScript като професионалист, вижте нашето ръководство за интелигентни линии и се подгответе да удивите в следващото си интервю.

11 едноредови JavaScript, които трябва да знаете

Постигнете много само с малко код, използвайки тази широка гама от едноредови JavaScript.

Прочетете Следващото

За автора