Înțelegerea propagării evenimentelor în JavaScript

Evenimentele din JavaScript acționează ca notificări că a avut loc o interacțiune a utilizatorului sau o altă acțiune. De exemplu, când faceți clic pe un buton de formular, browserul dvs. generează un eveniment pentru a indica acest lucru. Tastarea într-o casetă de căutare generează, de asemenea, evenimente și așa funcționează adesea sugestia automată online.

În JavaScript, evenimentele care implică interacțiunea utilizatorului se declanșează de obicei împotriva anumitor elemente. De exemplu, făcând clic pe un buton, se ridică un eveniment împotriva acelui buton. Dar evenimentele se propagă și: trag împotriva altor elemente din ierarhia documentelor.

Citiți mai departe pentru a afla totul despre propagarea evenimentelor și cele două tipuri distincte disponibile.

Ce este gestionarea evenimentelor în JavaScript?

Puteți utiliza codul JavaScript pentru a captura și a răspunde la evenimentele generate de o pagină web. Puteți face acest lucru pentru a anula comportamentul prestabilit sau pentru a lua măsuri atunci când nu există nicio valoare implicită. Un exemplu comun este validarea formularelor. Gestionarea evenimentelor vă permite să întrerupeți procesul normal de trimitere a formularelor.

Luați în considerare acest exemplu:

Faceți clic pe Mine

Codul de mai sus are un element buton cu un ID numit buton. Are un ascultător de evenimente clic care afișează o alertă cu mesajul Salut Lume.

Ce este propagarea evenimentelor?

Propagarea evenimentului descrie ordinea în care evenimentele parcurg Arborele DOM când browserul web le declanșează.

Să presupunem că există o etichetă de formular în interiorul unei etichete div și ambele au ascultători de evenimente onclick. Propagarea evenimentelor descrie modul în care un ascultător de evenimente se poate declanșa după celălalt.

Există două tipuri de propagare:

1. Barbotarea evenimentelor, prin care evenimentele bule în sus, de la copil la părinte.
2. Capturarea evenimentelor, prin care evenimentele se deplasează în jos, de la părinte la copil.

Ce este Event Bubbling în JavaScript?

Barbotarea evenimentului înseamnă că direcția de propagare a evenimentului va fi de la elementul copil la elementul părinte.

Luați în considerare următorul exemplu. Are trei elemente imbricate: div, form și buton. Fiecare element are un clic ascultător de evenimente. Browserul afișează un alerta cu un mesaj când dați clic pe fiecare element.

În mod implicit, ordinea în care browserul web afișează alertele va fi buton, form, apoi div. Evenimentele trec de la copil la părinte.

 div


 formă 



 Buton

Ce este capturarea evenimentelor?

Odată cu capturarea evenimentelor, ordinea de propagare este opusă bulei. În rest, conceptul este identic. Singura diferență cu capturarea este că evenimentele au loc de la părinte la copil. Spre deosebire de exemplul anterior, cu capturarea evenimentelor, browserul va afișa alerte în această ordine: div, formular și buton.

Pentru a realiza capturarea evenimentului, trebuie să faceți o singură modificare a codului. Al doilea parametru al addEventListener() definește tipul de propagare. Este fals în mod implicit, pentru a reprezenta barbotare. Pentru a activa capturarea evenimentelor, trebuie să setați al doilea parametru la adevărat.

 div.addEventListener(„clic”, ()=>{
 alert("div")
 }, Adevărat);
 form.addEventListener(„clic”, ()=>{
 alertă ("formular")
 }, Adevărat);
 button.addEventListener(„clic”, ()=>{
 alertă(„buton”)
 }, Adevărat);

Cum poți preveni propagarea evenimentelor?

Puteți opri propagarea evenimentelor folosind stopPropagation() metodă. The addEventListener() metoda acceptă un nume de eveniment și o funcție de gestionare. Handler-ul ia ca parametru un obiect eveniment. Acest obiect deține toate informațiile despre eveniment.

Când invoci stopPropagation() metoda, evenimentul se va opri din acel punct. De exemplu, când utilizați stopPropagation() pe elementul formular, evenimentele vor înceta să apară până la div. Dacă dați clic pe buton, veți vedea evenimente generate pe buton și formular, dar nu și div.

form.addEventListener(„clic”, (e)=>{
e.stopPropagation();
 alert("formular");
});

Legate de: Ultima fișă de cheat JavaScript

JavaScript are multă putere sub capotă

Gestionarea evenimentelor din JavaScript este puternică, comparabilă cu multe limbi de interfață complet. Când dezvoltați aplicații web interactive, acestea sunt o parte vitală a setului dvs. de instrumente. Dar există multe alte subiecte avansate de înțeles. Pentru dezvoltatorii profesioniști de JavaScript, există multe de învățat!

Dacă doriți să învățați să codificați JavaScript ca un profesionist, consultați ghidul nostru pentru căptușeli inteligente și pregătiți-vă să uimiți în următorul interviu.

11 JavaScript One-Liners pe care ar trebui să le cunoașteți

Obțineți multe cu doar un mic cod folosind această gamă largă de versiuni JavaScript.

Citiți în continuare

Despre autor