Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Introduktion til Hændelser og Hændelseslyttere | Håndtering af Hændelser og Brugerinteraktioner i JavaScript
Avanceret JavaScript-Mestring

bookIntroduktion til Hændelser og Hændelseslyttere

Hvad er hændelser i JavaScript?

JavaScript tilbyder mekanismer til at håndtere disse hændelser og udføre specifik kode som reaktion, hvilket gør din webapplikation interaktiv og dynamisk.

Almindelige hændelsestyper

Forklaring af addEventListener() og hvordan man tilføjer event-lyttere

For at reagere på events i JavaScript, tilføjes en event-lytter til et element. Den mest almindelige metode til dette er funktionen addEventListener(), som lytter efter specifikke events og kalder en funktion, når eventen opstår.

element.addEventListener('event', function, useCapture);
  • event: Typen af event, du ønsker at lytte efter (f.eks. 'click', 'submit');
  • function: Callback-funktionen, der udføres, når eventen udløses;
  • useCapture (valgfri): En boolean, der angiver, om eventen skal fanges under capture- eller bubbling-fasen (standard er false, hvilket betyder, at der lyttes under bubbling-fasen).

Click-event-lytter

Lad os tilføje en click event-lytter til knappen. Når der klikkes, udløses en alert.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Event-lytteren er tilknyttet #myButton-elementet, og når brugeren klikker på knappen, vises en beskedboks med teksten "Button clicked!"

Submit event-lytter

Tilføjelse af en event-lytter for submit-begivenheden, hvor standardformularens indsendelsesadfærd forhindres for at håndtere dataene med JavaScript.

index.html

index.html

index.css

index.css

index.js

index.js

copy

En eventlytter på formularens submit-hændelse forhindrer standardindsendelsen med event.preventDefault(), hvilket muliggør, at brugerdefineret JavaScript kan håndtere dataene i stedet. Ved indsendelse hentes det indtastede navn og vises i et afsnit med ID'et displayName.

Keypress-hændelse

Lad os tilføje en keypress-eventlytter til inputfeltet. Når en tast trykkes, vises den i afsnittet.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Hver gang en tast trykkes ned, mens der skrives i inputfeltet, logges den trykkede tast i konsollen.

Praktisk eksempel: Håndtering af formularvalidering ved indsendelse

Opret logik til validering af formularen før indsendelse.

index.html

index.html

index.css

index.css

index.js

index.js

copy

submit-hændelseslytteren sikrer, at formularen ikke bliver sendt, hvis de påkrævede felter er tomme. Hvis enten brugernavn eller adgangskodefeltet er tomt, forhindres hændelsen i at fortsætte, og en fejlmeddelelse vises.

1. Hvad er formålet med addEventListener()?

2. Hvilken af følgende er IKKE en gyldig eventtype for addEventListener()?

question mark

Hvad er formålet med addEventListener()?

Select the correct answer

question mark

Hvilken af følgende er IKKE en gyldig eventtype for addEventListener()?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 1

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

What are some other common event types in JavaScript?

Can you explain how event propagation works?

How do I remove an event listener in JavaScript?

Awesome!

Completion rate improved to 2.22

bookIntroduktion til Hændelser og Hændelseslyttere

Stryg for at vise menuen

Hvad er hændelser i JavaScript?

JavaScript tilbyder mekanismer til at håndtere disse hændelser og udføre specifik kode som reaktion, hvilket gør din webapplikation interaktiv og dynamisk.

Almindelige hændelsestyper

Forklaring af addEventListener() og hvordan man tilføjer event-lyttere

For at reagere på events i JavaScript, tilføjes en event-lytter til et element. Den mest almindelige metode til dette er funktionen addEventListener(), som lytter efter specifikke events og kalder en funktion, når eventen opstår.

element.addEventListener('event', function, useCapture);
  • event: Typen af event, du ønsker at lytte efter (f.eks. 'click', 'submit');
  • function: Callback-funktionen, der udføres, når eventen udløses;
  • useCapture (valgfri): En boolean, der angiver, om eventen skal fanges under capture- eller bubbling-fasen (standard er false, hvilket betyder, at der lyttes under bubbling-fasen).

Click-event-lytter

Lad os tilføje en click event-lytter til knappen. Når der klikkes, udløses en alert.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Event-lytteren er tilknyttet #myButton-elementet, og når brugeren klikker på knappen, vises en beskedboks med teksten "Button clicked!"

Submit event-lytter

Tilføjelse af en event-lytter for submit-begivenheden, hvor standardformularens indsendelsesadfærd forhindres for at håndtere dataene med JavaScript.

index.html

index.html

index.css

index.css

index.js

index.js

copy

En eventlytter på formularens submit-hændelse forhindrer standardindsendelsen med event.preventDefault(), hvilket muliggør, at brugerdefineret JavaScript kan håndtere dataene i stedet. Ved indsendelse hentes det indtastede navn og vises i et afsnit med ID'et displayName.

Keypress-hændelse

Lad os tilføje en keypress-eventlytter til inputfeltet. Når en tast trykkes, vises den i afsnittet.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Hver gang en tast trykkes ned, mens der skrives i inputfeltet, logges den trykkede tast i konsollen.

Praktisk eksempel: Håndtering af formularvalidering ved indsendelse

Opret logik til validering af formularen før indsendelse.

index.html

index.html

index.css

index.css

index.js

index.js

copy

submit-hændelseslytteren sikrer, at formularen ikke bliver sendt, hvis de påkrævede felter er tomme. Hvis enten brugernavn eller adgangskodefeltet er tomt, forhindres hændelsen i at fortsætte, og en fejlmeddelelse vises.

1. Hvad er formålet med addEventListener()?

2. Hvilken af følgende er IKKE en gyldig eventtype for addEventListener()?

question mark

Hvad er formålet med addEventListener()?

Select the correct answer

question mark

Hvilken af følgende er IKKE en gyldig eventtype for addEventListener()?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 1
some-alt