addEventListener og Event-objektet
Tilknyt event listeners, modtag Event-objektet, brug preventDefault og stopPropagation, og forstå event bubbling.
addEventListener og Event-objektet er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad er hændelser?
Hændelser er signaler, som browseren udløser, når noget sker: en bruger klikker, trykker på en tast, bevæger musen, siden indlæses, eller en netværksforespørgsel bliver færdig. JavaScript reagerer på hændelser ved at tilknytte hændelseslyttere.
Syntaks for addEventListener
element.addEventListener(type, handler) tilknytter en funktion, der køres, når hændelsen udløses. Håndteringsfunktionen modtager et Event-objekt med oplysninger om det, der skete.
const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});Almindelige hændelsestyper
Mus: click, dblclick, mouseenter, mouseleave, mousemove. Tastatur: keydown, keyup, keypress. Formular: submit, input, change, focus, blur. Dokument: DOMContentLoaded, load. Vindue: resize, scroll.
// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);
// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));Hændelsesobjektet
Alle håndteringsfunktioner modtager et Event-objekt. Vigtige egenskaber: e.target (elementet, der udløste hændelsen), e.currentTarget (elementet, som lytteren er tilknyttet), e.type (hændelsens navn), e.timeStamp.
document.addEventListener('click', (e) => {
console.log(e.type); // 'click'
console.log(e.target); // element that was clicked
console.log(e.currentTarget); // element with the listener (document)
console.log(e.timeStamp); // ms since page load
});preventDefault()
event.preventDefault() forhindrer browserens standardhandling. Brug den til at forhindre formularafsendelse, linknavigation eller kontekstmenuer ved højreklik i spil.
form.addEventListener('submit', (e) => {
e.preventDefault(); // stop page reload
// validate and process form data with JavaScript
});
link.addEventListener('click', (e) => {
e.preventDefault(); // handle SPA navigation manually
router.navigate(e.target.href);
});stopPropagation()
event.stopPropagation() forhindrer hændelsen i at boble op gennem DOM-træet. Brug den, når en indre elements håndteringsfunktion ikke skal udløse det ydre elements håndteringsfunktion.
modal.addEventListener('click', (e) => {
e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
closeModal(); // only fires for clicks outside modal
});Hændelsesbobling
Hændelser bobler op — efter de er udløst på målet, udløses de på forælderen, derefter bedsteforælderen og hele vejen til document. Sådan fungerer hændelsesdelegering: Tilknyt én lytter til en forælder, og brug e.target til at identificere det barn, der faktisk blev klikket på.
// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
if (e.target.matches('button')) {
console.log('Clicked:', e.target.textContent);
}
});Mønsteret hændelsesdelegering
Hændelsesdelegering går ud på at lytte på et forælderelement i stedet for at tilknytte lyttere til hvert enkelt barn. Det er mere effektivt og håndterer automatisk børn, der tilføjes dynamisk.
// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));
// Use delegation:
list.addEventListener('click', (e) => {
if (e.target.closest('li')) handleClick(e);
});Tastaturhændelser
Tastaturhændelser udløses ved tastetryk. Brug e.key (en streng som 'Enter', 'Escape', 'a') i moderne kode. Ældre kode brugte e.keyCode (forældet). e.metaKey, e.ctrlKey og e.shiftKey registrerer modifikationstaster.
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
if (e.key === 'Enter' && e.ctrlKey) submitForm();
});Fjernelse af hændelseslyttere
Brug removeEventListener til at fjerne en lytter. Håndteringsfunktionen skal være den samme funktionsreference — anonyme funktioner kan ikke fjernes. I React/Vue håndterer du typisk ikke dette manuelt.
function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);Indstillingen once
Send { once: true } som det tredje argument for automatisk at fjerne lytteren, efter at den er udløst én gang. Det er nyttigt til handlinger, der kun skal udføres én gang, for eksempel når et splash screen lukkes.
document.querySelector('#start').addEventListener('click', startApp, { once: true });Indstillingen capture
Som standard udløses lyttere under boblefasen (opad). Send { capture: true } for at udløse dem under capture-fasen (nedad, før målets egne lyttere).
Hurtigt tjek
Hvilken metode forhindrer browseren i at udføre sin standardadfærd for en hændelse?
Opsamling: DOM-hændelser
addEventListener(type, handler) tilknytter lyttere. Event-objektet indeholder target, type og styringsmetoder. preventDefault() blokerer standardhandlinger. stopPropagation() stopper bobling. Brug hændelsesdelegering for bedre ydeevne og dynamiske børn. Fjern lyttere for at forhindre hukommelseslækager.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “addEventListener og Event-objektet” gratis?
Ja — hele teksten til “addEventListener og Event-objektet” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “addEventListener og Event-objektet”?
Tilknyt event listeners, modtag Event-objektet, brug preventDefault og stopPropagation, og forstå event bubbling. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “addEventListener og Event-objektet”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- querySelector og querySelectorAll
- addEventListener og Event-objektet
- Ændring af indhold: textContent, innerHTML og classList
- Oprettelse og tilføjelse af elementer