Zie events live in een log verschijnen en kopieer daarna addEventListener-patronen voor click, submit, scroll, delegatie, once, passive en opruimen met AbortController.
Een event listener is een functie die de browser aanroept wanneer er iets met een element gebeurt, zoals een klik, het verzenden van een formulier of scrollen. U koppelt er een met element.addEventListener(type, handler, options). Het options-object schakelt once, passive, capture of een abort-signaal in, en removeEventListener koppelt dezelfde functie later weer los.
Opties van addEventListener
Optie
Standaard
Effect
Verwijdert de listener automatisch na de eerste aanroep
false (true voor wheel en touch op window, document en body)
Belooft preventDefault niet aan te roepen, zodat scrollen nooit hoeft te wachten
Draait op de weg omlaag naar het target in plaats van op de weg terug omhoog
Een AbortSignal; als u het afbreekt, wordt de listener verwijderd
Events zijn makkelijker te begrijpen als u ze kunt zien. Het eventlog hieronder registreert elke aanroep van een listener in een klein testgebied, zodat u kunt klikken, typen, verzenden en scrollen en de volgorde, het target en het effect van elke optie kunt bekijken. Kopieer daarna de patronen voor de taken die u echt hebt.
Gebruik de bedieningselementen in het testgebied: klik op de knoppen, typ in het veld, verzend het formulier en scroll in het vak.
Elke aanroep van een listener verschijnt in het log met het eventtype, het element waar het begon en het element dat het afhandelde.
Zet once aan om een listener na één aanroep te zien verdwijnen, of zet delegatie uit om de lijst klikken per item te laten afhandelen.
Kopieer een van de voorbeelden hieronder. Elk voorbeeld is gewoon JavaScript zonder library.
Geef een benoemde functie mee als u de listener later wilt verwijderen. Een inline arrow function kan later niet worden teruggevonden.
AbortController verwijdert een hele groep listeners met één aanroep van abort(), wat goed past bij componenten die mounten en unmounten.
Luister naar submit op het formulier, niet naar click op de knop, zodat ook op Enter drukken in een veld wordt afgehandeld.
Gebruik event.target.closest("selector") in gedelegeerde handlers. Een klik op een icoon in een knop vindt dan nog steeds de knop.
focus en blur bubbelen niet. Delegeer in plaats daarvan focusin en focusout.
Veelgestelde vragen
Wat is event delegation?
In plaats van aan elk item een listener te koppelen, koppelt u er één aan een gemeenschappelijke parent. Omdat de meeste events omhoog bubbelen, hoort de parent klikken van al zijn children, ook van items die later zijn toegevoegd, en gebruikt hij event.target om te bepalen waarop is geklikt.
Het moet dezelfde functiereferentie en dezelfde capture-instelling krijgen als addEventListener kreeg. Twee arrow functions met identieke code zijn nog steeds verschillende functies, dus definieer de handler één keer en geef die variabele beide keren mee.
Wat doet passive: true?
Het vertelt de browser dat uw handler preventDefault niet aanroept, zodat de pagina direct kan beginnen met scrollen in plaats van te wachten tot uw code klaar is. Browsers gebruiken voor wheel- en touch-listeners op window, document en body al standaard passive.
Wat is het verschil tussen target en currentTarget?
target is het binnenste element waar het event begon, en dat blijft gelijk terwijl het event omhoog bubbelt. currentTarget is het element waarvan de listener op dit moment draait, en dat verandert op elk niveau.
Activeert form.submit() het submit-event?
Nee. Als u form.submit() vanuit een script aanroept, worden het submit-event en de validatie overgeslagen. Roep form.requestSubmit() aan als u wilt dat uw submit-listeners en de ingebouwde controles draaien.
addEventListener of onclick?
De property onclick bevat één functie, dus een tweede toewijzen vervangt de eerste. Met addEventListener kunnen meerdere onafhankelijke listeners een element delen en het ondersteunt het options-object, dus het is de betere standaardkeuze.
Hoe een event reist
Een verzonden event beweegt in drie fasen. In de capture-fase reist het omlaag van window naar het target, het bereikt het target en bubbelt dan via elke voorouder weer omhoog. Listeners draaien in de bubble-fase, tenzij u om capture vraagt.
stopPropagation stopt de reis, zodat voorouders het event nooit horen. Gebruik het zelden, want gedelegeerde listeners en analytics hoger in de boom houden er dan ongemerkt mee op.
Scrollen zonder de pagina te vertragen
Scroll-events kunnen vele keren per frame van beweging afgaan. Houd de handler piepklein, lees posities uit in plaats van layout te schrijven, en bundel visuele updates in requestAnimationFrame.
Voor taken zoals elementen tonen zodra ze in beeld komen, is een IntersectionObserver meestal goedkoper dan bij elke scroll meten. Het event scrollend, volgens MDN Baseline sinds december 2025, gaat één keer af wanneer de beweging stopt.
Listeners opruimen
Listeners op objecten die lang bestaan, zoals window of document, houden hun handler en alles waarnaar die verwijst in leven. Als het deel van de pagina dat ze nodig had verdwijnt, verwijder ze dan.
De optie signal maakt dit overzichtelijk. Maak één AbortController per functie, geef het signal mee aan elke listener en roep bij het afbreken één keer abort() aan.
Eventtypes die u het meest gebruikt
Veelgebruikte events en waar u ernaar luistert
Event
Gaat af wanneer
Bubbelt?
Een aanwijzer wordt ingedrukt en losgelaten, of Enter of Space op een knop
Ja
De waarde van een veld verandert terwijl de bezoeker typt
Ja
De waarde van een veld wordt vastgelegd, bijvoorbeeld bij blur of een selectie
Ja
Een formulier wordt verzonden; gaat af op het form-element
Ja
Er wordt op een toets gedrukt
Ja
focus / blur
Een element krijgt of verliest focus
Nee
focusin / focusout
Hetzelfde als focus en blur, maar met bubbelen
Ja
DOMContentLoaded
De HTML is geparset en uitgestelde scripts zijn uitgevoerd; luister op document
Niet van toepassing
Patronen om te kopiëren
Click met een benoemde handler die u kunt verwijderen
Door de functie in een variabele te bewaren, werkt removeEventListener.
Een formulier verzenden zonder herladen
preventDefault stopt de eigen navigatie van de browser. event.submitter vertelt u welke verzendknop is gebruikt.
Event delegation op een lijst
Eén listener op de lijst handelt elke verwijderknop af, ook in rijen die na het laden van de pagina zijn toegevoegd.
Een passive scroll-listener, beperkt tot één update per frame
passive: true laat het scrollen meteen beginnen, en requestAnimationFrame beperkt het werk tot één keer per frame.
once en AbortController
De eerste listener draait één keer. De andere worden allemaal samen verwijderd door één aanroep van abort().
Sneltoets die typen in velden negeert
Door het target te controleren, gaat de sneltoets niet af terwijl iemand een slash in een zoekvak typt.