Bubbling och Capturing

Vad är Event Bubbling?

• Händelser bubblar uppåt i DOM-trädet, från målelementet till rotelement.
• Händelsehanterare som lyssnar på föräldraelement fångar upp händelsen.

Vad är Event Capturing?

• Händelser fångas upp när de "fångas" i DOM-trädet, vilket börjar vid rotelement.
• Händelsehanterare som lyssnar på föräldraelement fångar upp händelser innan de når målelementet.

Praktiska steg:

1. Lägg till en händelselyssnare på målelementet.
2. Lägg till en händelselyssnare på föräldraelementet (för bubblande) eller dokumentelementet (för fångning).
3. Använd stopPropagation() för att stoppa händelsepropageringen.

Event Propagation i Javascript:

// Bubblande
document.getElementById("target").addEventListener("click", function() {
  console.log("Målelement klickat");
});

// Fångning
document.addEventListener("click", function() {
  console.log("Dokument klickat");
}, true); // Sätt 'true' för fångning

Stoppa händelsepropagering:

document.getElementById("target").addEventListener("click", function(e) {
  console.log("Målelement klickat");
  e.stopPropagation();
});