Gebeurtenispropagatie

Gebeurtenispropagatie beschrijft hoe een gebeurtenis zich door de DOM verplaatst nadat deze is geactiveerd, en kent drie afzonderlijke fasen: Capturing, Target en Bubbling fasen.

Capturing-fase (Capture)

De gebeurtenis begint bij de root van de DOM-boom (window) en beweegt naar beneden richting het doelelement. Event listeners in deze fase vangen de gebeurtenis op terwijl deze naar beneden reist.

Target-fase

De gebeurtenis bereikt het doelelement (het element dat de gebeurtenis heeft geactiveerd). Hier worden de event listeners uitgevoerd die aan het doelelement zelf zijn gekoppeld.

Bubbling-fase (Bubble)

Nadat het doelelement is bereikt, beweegt de gebeurtenis weer omhoog door de DOM-boom naar de root (window), en bubbelt door de bovenliggende elementen. Dit is de meest gebruikte fase, waardoor bovenliggende elementen kunnen reageren op gebeurtenissen die door kindelementen zijn geactiveerd.

Het event verspreidt zich door de DOM wanneer op de button wordt geklikt. Eerst wordt het event geactiveerd op de button (doelfase), daarna borrelt het omhoog naar de binnenste div en uiteindelijk naar de buitenste div (bubbelingsfase).

Eventdelegatie

Eventdelegatie is een techniek die gebruikmaakt van eventpropagatie om events van kindelementen af te handelen met één enkele eventlistener op een ouderelement. In plaats van individuele listeners aan elk kind toe te voegen, luistert een ouderelement naar events die omhoog borrelen vanuit zijn kinderen. Deze aanpak heeft twee belangrijke voordelen:

1. Prestaties: Het verminderen van het aantal eventlisteners verbetert de prestaties, vooral in situaties waarin elementen dynamisch worden aangemaakt (bijvoorbeeld een lijst die groeit naarmate er nieuwe items worden toegevoegd);
2. Onderhoudbaarheid: Eventdelegatie vereenvoudigt de code, vooral bij het werken met grote DOM-structuren of dynamische inhoud.

In plaats van afzonderlijke klikluisteraars toe te voegen aan elk button-element, wordt één enkele luisteraar toegevoegd aan het bovenliggende div-element. Het event bubbelt omhoog van de button-elementen naar de div, waar het wordt afgehandeld.

Slechte aanpak

Goede aanpak

Praktisch Voorbeeld: Dynamische Lijst Afhandelen

Eventdelegatie is ideaal voor het beheren van interacties in lijsten of tabellen die in de loop van de tijd kunnen groeien (bijvoorbeeld het toevoegen van taken aan een takenlijst of producten aan een winkelwagen). Terwijl items worden toegevoegd of verwijderd, handelt de bovenliggende container (zoals ul of table) alle interacties af, waardoor het niet nodig is om luisteraars aan elk kindelement toe te voegen of te verwijderen.