JavaScript Academy · Lektion

Grundlæggende om addEventListener

Tilknyt event handlers til elementer for at håndtere hændelser.

Lektion 1 af 413 trin

Grundlæggende om addEventListener er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Reagér på hændelser

Hændelser lader din kode reagere på brugerhandlinger som klik, tastetryk og formularindsendelser. addEventListener er standardmåden at lytte efter dem på.

Grundlæggende syntaks

Kald addEventListener med et hændelsesnavn og en håndteringsfunktion. Funktionen kører, hver gang hændelsen opstår.

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

Navngivne håndteringsfunktioner

Du kan videregive en navngiven funktion. Det holder koden organiseret og gør det især muligt at fjerne lytteren senere.

function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);

Flere lyttere

I modsætning til den gamle onclick-egenskab kan du knytte mange lyttere til den samme hændelse uden at overskrive hinanden.

btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);

removeEventListener

Hvis du vil holde op med at lytte, skal du kalde removeEventListener med det samme hændelsesnavn og den samme funktionsreference, som du brugte til at tilføje lytteren.

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

Anonyme funktioner kan ikke fjernes

En indlejret arrow-funktion opretter en ny reference hver gang, så den kan ikke fjernes senere. Brug en navngiven reference, hvis du får brug for at fjerne den.

btn.addEventListener("click", () => doThing());
// no way to remove this exact listener

Indstillingen once

Hvis du videregiver { once: true }, fjernes lytteren automatisk, efter at den er blevet udløst én gang.

btn.addEventListener("click", init, { once: true });

Indstillingen capture

Som standard kører lyttere under boblefasen. { capture: true } får dem i stedet til at køre under fangstfasen.

parent.addEventListener("click", handler, { capture: true });

Indstillingen passive

{ passive: true } lover, at du ikke kalder preventDefault, så browseren kan optimere rulleydelsen.

window.addEventListener("scroll", onScroll, { passive: true });

Indstillingen signal

Et signal fra AbortController lader dig fjerne én eller flere lyttere ved at afbryde signalet, hvilket er praktisk ved oprydning.

const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

this i håndteringsfunktioner

I en almindelig håndteringsfunktion refererer this til det element, som lytteren er knyttet til. Arrow-funktioner binder ikke this på ny.

btn.addEventListener("click", function () {
  console.log(this); // the button element
});

Hurtigt tjek

Afprøv reglerne for fjernelse.

Besvar den i den interaktive lektion

Opsummering

addEventListener(type, handler, options) lytter efter hændelser og understøtter flere lyttere. Fjern dem med removeEventListener ved hjælp af den samme reference, så foretræk navngivne funktioner. Nyttige indstillinger omfatter once, capture, passive og signal. I almindelige håndteringsfunktioner er this målelementet.

Gratis at komme i gang

Lær JavaScript 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: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Grundlæggende om addEventListener” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Grundlæggende om addEventListener”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Grundlæggende om addEventListener”?

Tilknyt event handlers til elementer for at håndtere hændelser. Du øver dig i JavaScript 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å JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript 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 1 af 4.

Hvor lang tid tager lektionen “Grundlæggende om addEventListener”?

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 JavaScript Academy-lektion?

Ja. Alle JavaScript 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

← Tilbage til JavaScript Academy