Event Bubbling og Event Capturing er de mest anvendte udtryk i JavaScript på tidspunktet for begivenhedsflowet. Dette er de to måder, hvorpå udbredelse af begivenheder i HTML DOM API. Denne artikel om begivenhedsbobling og hændelsesoptagelse i JavaScript beskriver detaljeret, hvorfor vi kræver disse i i følgende rækkefølge:
Hvad er begivenhedsbobling i JavaScript?
Event Bubbling er det udtryk, som folk skal støde på, mens de udvikler en webapplikation eller webside . Dybest set er begivenhedsbobling en teknik, hvor begivenhedshåndterere kaldes, når et element er indlejret i et andet emne og skal være af samme begivenhed. Det svarer til indkapsling.
Event Bubbling er kun en lille del af håndtering af begivenheder i JavaScript. For at forstå det bedre er vi nødt til at vide om begivenhedsformering og hvordan det understøtter Event Bubbling.
Hvad er begivenhedsformering?
Formering af begivenheder kan sammenlignes med overordnet udtryk med begivenhed, der bobler og fanger som sit barn.Det er repræsenteret som følger:
Hvis du klikker på et hvilket som helst billede, genererer det ikke kun en klikhændelse, men det fortsætter til forælder “a” og bedstefar “li”. På denne måde finder funktionens udbredelse sted. Her betragtes billedet som barnet, og det er begivenhedsmålet, hvor kliket genereres. Billedet sammen med dets forfædre sammen danner grenen i en træterminologi. Filialen er vigtig, når vi lærer at kende stien, som begivenheden spredes langs.
Hver af lytterne kaldes med henholdsvis et begivenhedsobjekt, der samler information om begivenheden. Denne udbredelse er meget vigtig, da vi lærer processen at kalde alle lyttere til den givne begivenhed. Fra billedet ovenfor kan vi bemærke, at filialbestemmelsen er statisk. Træændringer, der sker under begivenheden, ignoreres. Her er forplantningen tovejs, dvs. den går fra vinduet til begivenhedsmålet og kommer tilbage. Her er formeringen bredt kategoriseret i tre hovedtyper. De er:
- Fangstfasen: Gå fra vinduet til begivenhedsmålfasen.
- Målfasen: Det er målfasen.
- Boblefasen: Fra begivenhedens målforælder tilbage til vinduet.
Hvad er optagelse af begivenheder?
I denne fase kaldes capturer-lyttere, hvis værdi er blevet registreret som 'sand'. Det er skrevet som:
el.addEventListener ('klik', lytter, sandt)Her er lytterværdien blevet registreret til at være 'sand', så denne begivenhed fanges. Hvis der ikke var nogen værdi, var værdien som standard falsk, og begivenheden blev ikke fanget. Så i denne fase finder den begivenhed, hvis værdi er sand, kun vej fra vinduet og bliver kaldt og fanget.
Så i tilfælde af målfasen kaldes alle tilmeldte lyttere uanset deres flagstatus, der er sand eller falsk.
Brug af Event Bubbling og Event Capturing i JavaScript
I Bubbling-fasen kaldes kun den ikke-capterer, det vil sige de begivenheder, der har flagværdi som 'falsk'. Begivenhedsbobling og hændelsesoptagelse er meget nyttige og vigtige i DOM (Document Object Model) terminologi.
forskellen mellem forlængere og redskaber
el.addEventListener ('klik', lytter, falsk) // lytter fanger ikke el.addEventListener ('klik', lytter) // lytter fanger ikkeOvenstående stykke kode viser arbejdet med boblende og indfangende fase. Ikke alle begivenheder går til begivenhedsmålet. Nogle af dem bliver ikke boblet op. Deres rejse stopper efter målfasen. De tre begivenhedsfasestrømninger er illustreret i følgende diagram:
Begivenhedsbobling fungerer ikke i alle typer begivenheder, men lytteren skal have '.boble ”Boolsk egenskab for begivenhedsobjektet. Nogle af de andre egenskaber inkluderer:
- e.target: der henviser til begivenhedsmålet.
- e.currentTarget: det er den tilstand, hvor de nuværende lyttere er registreret. Her henvises til værdien ved hjælp af dette nøgleord.
- e.eventPhase: Det er et heltal, der henviser til andre tre nøgleord som f.eks Capturing_phase, Bubbling_phase, AT_Target fase.
Arbejdsprocedure
Lad os se nærmere på ovenstående illustration. Lad os klikke på 'buttonOne' -elementet, og så udløses straks en begivenhed. Normalt starter en begivenhed sin rejse fra roden, der er det øverste element i træet. Derefter følger det træet målhændelsen, der er “buttonOne”. Sådan rejser det:
hvad er pojo-klasse i java
Som vist i figuren begiver begivenheden sig gennem DOM-terminologierne og når til slutbegivenheden. Nu når begivenheden når sit mål, slutter den ikke. Det fortsætter og fortsætter inden for DOM-terminologier som illustreret i nedenstående billede.
Ligesom før får hvert element langs begivenhedens sti, når det bevæger sig op, besked om dets eksistens. Når det fortsætter som dette, skal du tænke på, om vi kan stoppe processen eller ej. Svaret på spørgsmålet er ja, vi kan stoppe udbredelsen af begivenheden. Dette gøres ved at påberåbe sig “StopPropagation” metode til begivenhedsobjektet.
window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), sand) vindue.addEventListener (' klik ', lytter (' b1 ')) vindue.addEventListener (' klik ', lytter (' b2 '))Ved at anvende nøgleordet er vi i stand til at stoppe forplantningen. Det fungerer sådan, når vi anvender nøgleordet “ stopPropagation ” så kaldes ikke alle begivenhederne under hovedbegivenhederne, og derfor kaldes de ikke, som det er nævnt i kodestykket ovenfor. Der er et andet nøgleord kendt som “ stopImmediatePropagation ”. Som navnet antyder, stopper det straks søskendes arbejde.
Med dette er vi kommet til slutningen af vores artikel. Jeg håber, du har forstået, hvad der er Event Bubbling og Event Capturing i JavaScript.
Nu hvor du kender til Event Bubbling og Event Capturing i JavaScript, skal du tjekke af Edureka. Webudvikling certificeringstræning hjælper dig med at lære, hvordan du opretter imponerende websteder ved hjælp af HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google API'er og distribuerer det til Amazon Simple Storage Service (S3).
Har du et spørgsmål til os? Nævn det i kommentarfeltet i 'Event Bubbling and Event Capturing in JavaScript', og vi vender tilbage til dig.