Förstå händelseutbredning i JavaScript

Händelser i JavaScript fungerar som meddelanden om att en användarinteraktion, eller annan åtgärd, har ägt rum. Till exempel, när du klickar på en formulärknapp genererar din webbläsare en händelse för att indikera att detta har hänt. Att skriva i en sökruta väcker också händelser och det är så auto-suggest fungerar ofta online.

I JavaScript utlöses händelser som involverar användarinteraktion vanligtvis mot specifika element. Om du till exempel klickar på en knapp höjs en händelse mot den knappen. Men händelser sprider sig också: de skjuter mot andra element i dokumenthierarkin.

Läs vidare för att lära dig allt om händelseutbredning och de två distinkta typerna som finns tillgängliga.

Vad är händelsehantering i JavaScript?

Du kan använda JavaScript-kod för att fånga upp och svara på händelser som en webbsida tar upp. Du kan göra detta för att åsidosätta standardbeteende eller vidta åtgärder när det inte finns någon standard. Ett vanligt exempel är formvalidering. Händelsehantering låter dig avbryta den normala processen för formulärinlämning.

Tänk på det här exemplet:

Klicka här

Ovanstående kod har ett knappelement med ett ID som heter knappen. Den har en klickhändelselyssnare som visar en varning med meddelandet Hej världen.

Vad är händelseförökning?

Händelsespridning beskriver i vilken ordning händelserna färdas genom DOM-träd när webbläsaren aktiverar dem.

Anta att det finns en form-tagg inuti en div-tagg, och båda har onclick-händelseavlyssnare. Event Propagation beskriver hur en händelseavlyssnare kan avfyra efter den andra.

Det finns två typer av förökning:

1. Händelsebubbling, genom vilken händelser bubblar uppåt, från barn till förälder.
2. Händelsefångning, genom vilken händelser går nedåt, från förälder till barn.

Vad är Event Bubbling i JavaScript?

Händelsebubbling betyder att händelseutbredningsriktningen kommer att vara från det underordnade elementet till dess överordnade element.

Betrakta följande exempel. Den har tre kapslade element: div, form och knapp. Varje element har en klick händelselyssnare. Webbläsaren visar en varna med ett meddelande när du klickar på varje element.

Som standard är ordningen som webbläsaren visar varningar i knapp, formulär och sedan div. Händelserna bubblar upp från barn till förälder.

 div


 form 



 Knapp

Vad är händelsefångning?

Med händelsefångst är ordningen för spridning motsatsen till bubbling. I övrigt är konceptet identiskt. Den enda skillnaden med att fånga är att händelser inträffar från förälder till barn. I motsats till föregående exempel, med händelsefångst, kommer webbläsaren att visa varningar i denna ordning: div, form och knapp.

För att fånga händelser behöver du bara göra en ändring i koden. Den andra parametern av addEventListener() definierar typen av förökning. Det är falskt som standard för att representera bubbling. För att aktivera händelsefångst måste du ställa in den andra parametern till true.

 div.addEventListener("klick", ()=>{
 alert("div")
 }, Sann);
 form.addEventListener("klick", ()=>{
 alert("form")
 }, Sann);
 button.addEventListener("klick", ()=>{
 alert("knapp")
 }, Sann);

Hur kan du förhindra spridning av händelser?

Du kan stoppa spridningen av händelser med hjälp av stopPropagation() metod. De addEventListener() metod accepterar ett händelsenamn och en hanterarfunktion. Hanteraren tar ett händelseobjekt som sin parameter. Detta objekt innehåller all information om händelsen.

När du åberopar stopPropagation() metod kommer händelsen att sluta spridas från den punkten. Till exempel när du använder stopPropagation() på formulärelementet kommer händelser att sluta bubbla upp till div. Om du klickar på knappen kommer du att se händelser på knappen och formuläret, men inte div.

form.addEventListener("klick", (e)=>{
e.stopPropagation();
 alert("form");
});

Relaterad: The Ultimate JavaScript Cheat Sheet

JavaScript har mycket kraft under huven

JavaScripts händelsehantering är kraftfull, jämförbar med många fullskaliga gränssnittsspråk. När du utvecklar interaktiva webbapplikationer är det en viktig del av din verktygslåda. Men det finns många andra avancerade ämnen att ta tag i. För professionella JavaScript-utvecklare finns det mycket att lära!

Om du vill lära dig att koda JavaScript som ett proffs, kolla in vår guide till smart-one liners och förbered dig på att imponera i din nästa intervju.

11 JavaScript One-liners du bör känna till

Uppnå mycket med bara lite kod genom att använda detta breda utbud av JavaScript-one-liners.

Läs Nästa

Om författaren