JavaScript Academy · Lektion

Fångst- och bubblingsfaserna

Förstå hur händelser färdas genom DOM.

Lektion 1 av 413 steg

Fångst- och bubblingsfaserna är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Två resor genom DOM-trädet

När ni klickar på ett element utlöses händelsen inte bara på det elementet. Den färdas genom DOM-trädet i två faser: capture-fasen (uppifrån och ned, från document till målet) och bubble-fasen (nedifrån och upp, från målet tillbaka till document).

<div id="outer">
  <button id="inner">Click</button>
</div>

Standardläget: bubbling

Som standard lyssnar addEventListener under bubble-fasen. Ett klick på den inre knappen utlöser först dess händelsehanterare, sedan hanteraren på dess överordnade element, därefter hanteraren på nästa överordnade element och så vidare upp till document.

inner.addEventListener("click", () => console.log("inner"));
outer.addEventListener("click", () => console.log("outer"));
// Click inner -> logs: "inner" then "outer"

Aktivera capture

Skicka med ett tredje argument som är true (eller { capture: true }) för att i stället lyssna under capture-fasen. Capture-hanterare körs uppifrån och ned, före alla bubble-hanterare.

outer.addEventListener("click", () => console.log("outer capture"), true);
inner.addEventListener("click", () => console.log("inner bubble"));
// Click inner -> "outer capture" then "inner bubble"

Den fullständiga ordningen

För ett klick på #inner med hanterare i båda faserna är ordningen: capture-fasen uppifrån och ned, sedan målet och därefter bubble-fasen nedifrån och upp.

capture på document
capture på outer
inner (mål)
bubble på outer
bubble på document

event.target kontra event.currentTarget

event.target är elementet som faktiskt utlöste händelsen, alltså där klicket skedde. event.currentTarget är elementet vars lyssnare körs just nu. I en händelsehanterare på ett överordnat element som använder bubbling skiljer sig dessa åt.

outer.addEventListener("click", (e) => {
  console.log(e.target.id);        // "inner" - where click occurred
  console.log(e.currentTarget.id); // "outer" - listener owner
});

Stoppa propagationen

event.stopPropagation() stoppar färden: händelsen fortsätter inte till nästa element i den aktuella fasen. Händelsehanterare på överordnade element högre upp i trädet körs aldrig.

inner.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("handled here only");
});
outer.addEventListener("click", () => console.log("never runs"));

stopImmediatePropagation

stopPropagation() låter fortfarande andra lyssnare på samma element köras. För att även blockera andra lyssnare på samma element använder du event.stopImmediatePropagation().

inner.addEventListener("click", (e) => {
  e.stopImmediatePropagation();
  console.log("first only");
});
inner.addEventListener("click", () => console.log("blocked"));

preventDefault är annorlunda

Blanda inte ihop preventDefault() med stopPropagation(). preventDefault() avbryter webbläsarens standardåtgärd (att följa en länk eller skicka ett formulär), men stoppar INTE eventet från att bubbla.

link.addEventListener("click", (e) => {
  e.preventDefault();  // do not navigate
  // event still bubbles to parents
});

Varför capture används sällan

Den mesta koden använder bubbling eftersom det stämmer med intuitionen: det specifika elementet reagerar först och sedan får containrarna information om det. Capture är användbart när en förälder behöver fånga upp eller avvisa ett event innan underordnade element ser det.

Kontrollera fasen

event.eventPhase visar vilken fas som är aktiv: 1 capture, 2 vid målet och 3 bubbling. Detta behövs sällan, men är användbart vid felsökning av komplexa kedjor av lyssnare.

el.addEventListener("click", (e) => {
  console.log(e.eventPhase); // 1, 2, or 3
}, true);

Alla event bubblar inte

De flesta UI-event (click, input, keydown) bubblar. Några gör det inte som standard, till exempel focus, blur och mouseenter. För dessa kan du använda bubbling-varianterna (focusin, focusout) eller capture-fasen.

Snabbtest

Testa din förståelse av eventfaser.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Event färdas först genom capture (nedåt) och sedan genom bubbling (uppåt). Lyssnare använder bubbling som standard; skicka med true för capture. e.target är ursprunget och e.currentTarget är den lyssnare som äger eventet. Använd stopPropagation() för att stoppa färden och preventDefault() för att avbryta standardåtgärder. Dessa två faser utgör grunden för eventdelegering.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Fångst- och bubblingsfaserna” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Fångst- och bubblingsfaserna”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Fångst- och bubblingsfaserna”?

Förstå hur händelser färdas genom DOM. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Fångst- och bubblingsfaserna”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy