Event Bubbling și Event Capturing sunt cei mai utilizați termeni în JavaScript în momentul fluxului evenimentului. Acestea sunt cele două modalități de propagare a evenimentelor în API-ul HTML DOM. Acest articol despre publicarea evenimentelor și capturarea evenimentelor în JavaScript va descrie în detaliu de ce le solicităm în următoarea ordine:
Ce este Event Bubbling în JavaScript?
Event Bubbling este termenul pe care oamenii trebuie să îl întâlnească în timp ce dezvoltă o aplicație web sau o pagină web folosind . Practic, Event Bubbling este o tehnică prin care sunt apelați gestionarii de evenimente atunci când un articol este cuibărit pe un alt element și trebuie să fie de același eveniment. Este similar cu Encapsularea.
Event Bubbling este doar o mică parte din gestionarea evenimentelor în JavaScript. Pentru a o înțelege mai bine, trebuie să știm despre propagarea evenimentelor și despre modul în care suportă evenimentul de bubuit.
Ce este propagarea evenimentelor?
Propagarea evenimentului poate fi comparată ca termen părinte cu evenimentul care clocotește și captează ca copil.Este reprezentat după cum urmează:
Dacă faceți clic pe orice imagine, nu numai că va genera un eveniment de clic, dar va trece la părintele „a” și la bunicul „li”. În acest fel are loc propagarea funcției. Aici imaginea este considerată copil și este ținta evenimentului în care este generat clicul. Imaginea împreună cu strămoșii săi formează împreună ramura într-o terminologie a copacului. Ramura este importantă pe măsură ce ajungem să cunoaștem calea pe care se propagă evenimentul.
.trim () java
Fiecare dintre ascultători este chemat cu un obiect de eveniment, respectiv, care adună informații despre eveniment. Această propagare este foarte importantă pe măsură ce ajungem să cunoaștem procesul de chemare a tuturor ascultătorilor pentru evenimentul dat. Din imaginea de mai sus putem observa că determinarea ramurii este statică. Orice modificare a arborelui care apare în timpul evenimentului este ignorată. Aici propagarea este bidirecțională, adică merge de la fereastră la ținta evenimentului și revine. Aici propagarea este în general clasificată în trei tipuri principale. Acestea sunt:
- Faza de capturare: Mergând de la fereastră la faza țintă a evenimentului.
- Faza țintă: Este faza țintă.
- Faza cu bule: De la evenimentul părinte țintă înapoi la fereastră.
Ce este capturarea evenimentelor?
În această fază, sunt apelați ascultătorii capturatori a căror valoare a fost înregistrată ca „adevărată”. Este scris ca:
el.addEventListener („clic”, ascultător, adevărat)
Aici, valoarea ascultătorului a fost înregistrată pentru a fi „adevărată”, astfel încât acest eveniment este capturat. Dacă nu a existat nicio valoare, valoarea implicită a fost falsă și evenimentul nu va fi capturat. Deci, în această fază acel eveniment a cărui valoare este adevărată își găsește drumul doar din fereastră și este chemat și capturat.
Apoi, în faza țintă a evenimentului, toți ascultătorii înregistrați sunt chemați indiferent de starea lor de pavilion care este adevărată sau falsă.
Utilizarea evenimentelor de bubuit și de captare a evenimentelor în JavaScript
În faza Bubbling, este apelat doar non-capturatorul, adică evenimentele care au valoarea steagului drept „fals”. Clocotirea evenimentelor și Capturarea evenimentelor sunt foarte utile și importante în terminologia DOM (Document Object Model).
el.addEventListener („clic”, ascultător, fals) // ascultătorul nu captează el.addEventListener („clic”, ascultător) // ascultătorul nu captează
Bucata de cod de mai sus arată faza de funcționare și de captare. Nu toate evenimentele merg la ținta evenimentului. Unii dintre aceștia nu se îmbulzesc. Călătoria lor se oprește după faza țintă. Fluxul de trei faze de evenimente este ilustrat în următoarea diagramă:
Clocotirea evenimentelor nu funcționează în toate tipurile de evenimente, cu toate acestea, ascultătorul trebuie să dețină „.Bubble ”Proprietatea booleană a obiectului eveniment. Unele dintre celelalte proprietăți includ:
- e. țintă: care face referire la ținta evenimentului.
- e.currentTarget: este modul pe care sunt înregistrați ascultătorii actuali. Aici se face referire la valoarea utilizând acest cuvânt cheie.
- e.eventPhase: Este un număr întreg care se referă la alte trei cuvinte cheie, cum ar fi Capturing_phase, Bubbling_phase, AT_Target fază.
Procedura de lucru
Să aruncăm o privire mai atentă în ilustrația de mai sus. Să facem clic pe elementul „buttonOne” și apoi imediat va fi declanșat un eveniment. În mod normal, un eveniment își începe călătoria de la rădăcina care este cel mai de sus element al arborelui. Apoi, urmează arborele evenimentul țintă care este „buttonOne”. Iată cum călătorește:
Așa cum se arată în figură, evenimentul își face drum prin terminologiile DOM care ajung la evenimentul țintă în final. Acum, odată ce evenimentul și-a atins obiectivul, acesta nu se termină. Continuă și continuă în terminologiile DOM, așa cum este ilustrat în imaginea de mai jos.
La fel ca înainte, fiecare element de-a lungul drumului evenimentului, pe măsură ce se deplasează în sus, este informat despre existența sa. Pe măsură ce se întâmplă așa, trebuie să vă gândiți dacă putem opri procesul sau nu. Ei bine, răspunsul la întrebare este Da, putem opri propagarea evenimentului. Acest lucru se face prin invocarea „StopPropagation” metoda obiectului evenimentului.
window.addEventListener ('clic', e => {e.stopPropagation ()}, adevărat) window.addEventListener ('clic', ascultător ('c1'), adevărat) window.addEventListener ('clic', ascultător ('c2 '), adevărat) window.addEventListener (' clic ', ascultător (' b1 ')) window.addEventListener (' clic ', ascultător (' b2 '))Prin aplicarea cuvântului cheie suntem capabili să oprim propagarea. Funcționează astfel, atunci când aplicăm cuvântul cheie „ stopPropagation ” atunci toate evenimentele de sub evenimentele principale nu sunt apelate și, prin urmare, nu ar fi numite așa cum este menționat în piesa de cod de mai sus. Există un alt cuvânt cheie cunoscut sub numele de „ stopImmediatePropagation ”. După cum sugerează și numele, oprește imediat procedurile fraților.
Cu aceasta, am ajuns la sfârșitul articolului nostru. Sper că ați înțeles ce este Event Bubbling și Event Capturing în JavaScript.
Acum, că știți despre publicarea evenimentelor și capturarea evenimentelor în JavaScript, consultați de Edureka. Instruirea pentru certificarea dezvoltării web vă va ajuta să aflați cum să creați site-uri web impresionante folosind HTML5, CSS3, Twitter Bootstrap 3, jQuery și API-urile Google și să îl implementați în Amazon Simple Storage Service (S3).
Ai o întrebare pentru noi? Vă rugăm să menționați acest lucru în secțiunea de comentarii din „Event Bubbling and Event Capturing in JavaScript” și vă vom răspunde.