Event Bubbling and Event Capturing In JavaScript: Allt du behöver veta

Event Bubbling och Event Capturing är de mest använda termerna i JavaScript vid tidpunkten för eventflödet. Det här är de två sätten för händelseutbredning i HTML DOM API. Den här artikeln om Event Bubbling och Event Capturing i JavaScript kommer att beskriva i detalj varför vi behöver dessa i i följande sekvens:

• • • Vad är Event Bubbling i JavaScript?
    • Vad är evenemangsförökning?
    • Vad är Event Capturing?
    • Användning av Event Bubbling och Event Capturing i JavaScript
    • Arbetsförfarande

Vad är Event Bubbling i JavaScript?

Event Bubbling är den term som människor måste stöta på när de utvecklar en webbapplikation eller webbsida med . I grund och botten är Event Bubbling en teknik där evenemangshanterare anropas när ett objekt är kapslat på ett annat objekt och måste vara av samma händelse. Det liknar inkapsling.

Event Bubbling är bara en liten del av eventhantering i JavaScript. För att förstå det bättre måste vi veta om Event Propagation och hur det stöder Event Bubbling.

Vad är evenemangsförökning?

Händelseutbredning kan jämföras med föräldrauttrycket med händelse som bubblar och fångar som sitt barn.Det representeras enligt följande:

Om du klickar på någon bild skulle den inte bara generera en klickhändelse utan den fortsätter till förälder “a” och farfar “li”. På detta sätt sker förökning av funktion. Här betraktas bilden som barnet och det är händelsemålet där klicket genereras. Bilden tillsammans med sina förfäder bildar tillsammans grenen i en trädterminologi. Filialen är viktig när vi lär känna den väg längs vilken händelsen förökas.

Var och en av lyssnarna kallas med ett händelseobjekt som samlar information om händelsen. Denna förökning är mycket viktig när vi lär oss processen att kalla alla lyssnare för den givna händelsen. Från bilden ovan kan vi märka att filialbestämningen är statisk. Trädändringar som inträffar under evenemanget ignoreras. Här är förökningen dubbelriktad, det vill säga den går från fönstret till händelsemålet och kommer tillbaka. Här kategoriseras förökningen i stort sett i tre huvudtyper. De är:

1. Fångstfasen: Gå från fönstret till händelsefasen.
2. Målfasen: Det är målfasen.
3. Bubble Phase: Från händelsemålets förälder tillbaka till fönstret.

Vad är Event Capturing?

I denna fas kallas lyssnarna som lyssnar, vars värde har registrerats som ”sant”. Det är skrivet som:

el.addEventListener ('klicka', lyssnare, sant)

Här har lyssnarvärdet registrerats vara ”sant” så denna händelse fångas upp. Om det inte fanns något värde var värdet som standard falskt och händelsen skulle inte fångas. Så i den här fasen hittar den händelse vars värde är sant bara vägen från fönstret och blir kallad och fångad.

I händelsemålsfasen anropas sedan alla registrerade lyssnare oavsett deras flaggstatus som är sant eller falskt.

Användning av Event Bubbling och Event Capturing i JavaScript

I Bubbling-fasen kallas bara icke-kaptenaren, det vill säga de händelser som har flaggvärde som 'falskt'. Event bubbling och Event Capturing är mycket användbara och viktiga i DOM (Document Object Model) terminologi.

el.addEventListener ('klicka', lyssnare, falskt) // lyssnare fångar inte el.addEventListener ('klick', lyssnare) // lyssnare fångar inte

Ovan kod visar hur arbetet med bubblande och fånga fas. Inte alla händelser går till händelsemålet. Vissa av dem bubblas inte. Deras resa stannar efter målfasen. Treflödesfasflödet illustreras i följande diagram:

hur man gör en rad objekt

Event bubblar fungerar inte i alla typer av evenemang, men lyssnaren måste ha '.bubbla ”Booleska egenskapen för händelseobjektet. Några av de andra egenskaperna inkluderar:

1. e.target: som refererar till händelsemålet.
2. e.currentTarget: det är det läge som de nuvarande lyssnarna är registrerade på. Här refereras till värdet med hjälp av detta nyckelord.
3. e.eventPhase: Det är ett heltal som hänvisar till andra tre nyckelord som Capturing_phase, Bubbling_phase, AT_Target fas.

Arbetsförfarande

Låt oss titta närmare på bilden ovan. Låt oss klicka på 'buttonOne' -elementet och omedelbart kommer en händelse att utlösas. Normalt börjar en händelse sin resa från roten som är det översta elementet i trädet. Sedan följer det trädet målhändelsen som är “buttonOne”. Så här reser det:

Som framgår av figuren tar händelsen sig igenom DOM-terminologierna som når målet till slut. När evenemanget når sitt mål slutar det inte. Det fortsätter och fortsätter inom DOM-terminologier som illustreras i bilden nedan.

Precis som tidigare får varje element längs händelsens väg när det går upp meddelas om dess existens. När det fortsätter så här måste du fundera på om vi kan stoppa processen eller inte. Svaret på frågan är ja, vi kan stoppa spridningen av händelsen. Detta görs genom att åberopa “StopPropagation” metod för händelseobjektet.

window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), true) window.addEventListener (' click ', listener (' b1 ')) window.addEventListener (' click ', listener (' b2 '))

Genom att använda sökordet kan vi stoppa spridningen. Det fungerar så här när vi använder nyckelordet ” stopPropagation ” då kallas inte alla händelser under de viktigaste händelserna och därför skulle de inte kallas som det nämns i kodstycket ovan. Det finns ett annat nyckelord som kallas ” stopImmediatePropagation ”. Som namnet antyder stoppar det genast syskonen.

Med detta har vi kommit till slutet av vår artikel. Jag hoppas att du förstod vad som är Event Bubbling och Event Capturing i JavaScript.

Nu när du känner till Event Bubbling och Event Capturing i JavaScript, kolla in av Edureka. Webbutvecklingscertifieringsträning hjälper dig att lära dig hur du skapar imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuerar den till Amazon Simple Storage Service (S3).

Har du en fråga till oss? Vänligen nämna det i kommentarsektionen i ”Event Bubbling and Event Capturing in JavaScript” så återkommer vi till dig.