Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Introduksjon til Hendelser og Hendelseslyttere | Hendelseshåndtering og Brukerinteraksjoner i JavaScript
Avansert JavaScript-mestring

bookIntroduksjon til Hendelser og Hendelseslyttere

Hva er hendelser i JavaScript?

JavaScript tilbyr mekanismer for å håndtere disse hendelsene og utføre spesifikk kode som respons, noe som gjør webapplikasjonen interaktiv og dynamisk.

Vanlige hendelsestyper

Forklaring av addEventListener() og hvordan legge til hendelseslyttere

For å reagere på hendelser i JavaScript, legger du til en hendelseslytter på et element. Den vanligste metoden for dette er funksjonen addEventListener(), som lytter etter spesifikke hendelser og kaller en funksjon når hendelsen inntreffer.

element.addEventListener('event', function, useCapture);
  • event: Typen hendelse du ønsker å lytte etter (for eksempel 'click', 'submit');
  • function: Tilbakekallingsfunksjonen som skal kjøres når hendelsen utløses;
  • useCapture (valgfritt): En boolsk verdi som angir om hendelsen skal fanges under capture- eller bubbling-fasen (standard er false, som betyr at den lytter under bubbling-fasen).

Klikk-hendelseslytter

La oss legge til en click-hendelseslytter på knappen. Når den klikkes, utløses en alert.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Hendelseslytteren er knyttet til #myButton-elementet, og når brukeren klikker på knappen, vises en meldingsboks med teksten "Button clicked!"

Submit-hendelseslytter

Legg til en hendelseslytter for submit-hendelsen, og forhindre standard oppførsel for innsending av skjema for å håndtere dataene med JavaScript.

index.html

index.html

index.css

index.css

index.js

index.js

copy

En hendelseslytter på skjemaets submit-hendelse forhindrer standard innsending med event.preventDefault(), slik at egendefinert JavaScript kan håndtere dataene i stedet. Ved innsending hentes navnet som er skrevet inn og vises i et avsnitt med ID-en displayName.

Keypress-hendelse

La oss legge til en keypress-hendelseslytter på inndatafeltet. Når en tast trykkes, vil den vises i avsnittet.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Hver gang en tast trykkes mens du skriver i inndatafeltet, logges den trykkede tasten til konsollen.

Praktisk eksempel: Håndtering av validering av skjema ved innsending

La oss lage en logikk for validering av skjema før innsending.

index.html

index.html

index.css

index.css

index.js

index.js

copy

submit-hendelseslytteren sørger for at skjemaet ikke sendes inn dersom de påkrevde feltene er tomme. Hvis enten brukernavn- eller passordfeltet er tomt, forhindres hendelsen fra å fortsette, og en feilmelding vises.

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

2. Hvilken av følgende er IKKE en gyldig hendelsestype for addEventListener()?

question mark

Hva er formålet med addEventListener()?

Select the correct answer

question mark

Hvilken av følgende er IKKE en gyldig hendelsestype for addEventListener()?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 1

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.22

bookIntroduksjon til Hendelser og Hendelseslyttere

Sveip for å vise menyen

Hva er hendelser i JavaScript?

JavaScript tilbyr mekanismer for å håndtere disse hendelsene og utføre spesifikk kode som respons, noe som gjør webapplikasjonen interaktiv og dynamisk.

Vanlige hendelsestyper

Forklaring av addEventListener() og hvordan legge til hendelseslyttere

For å reagere på hendelser i JavaScript, legger du til en hendelseslytter på et element. Den vanligste metoden for dette er funksjonen addEventListener(), som lytter etter spesifikke hendelser og kaller en funksjon når hendelsen inntreffer.

element.addEventListener('event', function, useCapture);
  • event: Typen hendelse du ønsker å lytte etter (for eksempel 'click', 'submit');
  • function: Tilbakekallingsfunksjonen som skal kjøres når hendelsen utløses;
  • useCapture (valgfritt): En boolsk verdi som angir om hendelsen skal fanges under capture- eller bubbling-fasen (standard er false, som betyr at den lytter under bubbling-fasen).

Klikk-hendelseslytter

La oss legge til en click-hendelseslytter på knappen. Når den klikkes, utløses en alert.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Hendelseslytteren er knyttet til #myButton-elementet, og når brukeren klikker på knappen, vises en meldingsboks med teksten "Button clicked!"

Submit-hendelseslytter

Legg til en hendelseslytter for submit-hendelsen, og forhindre standard oppførsel for innsending av skjema for å håndtere dataene med JavaScript.

index.html

index.html

index.css

index.css

index.js

index.js

copy

En hendelseslytter på skjemaets submit-hendelse forhindrer standard innsending med event.preventDefault(), slik at egendefinert JavaScript kan håndtere dataene i stedet. Ved innsending hentes navnet som er skrevet inn og vises i et avsnitt med ID-en displayName.

Keypress-hendelse

La oss legge til en keypress-hendelseslytter på inndatafeltet. Når en tast trykkes, vil den vises i avsnittet.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Hver gang en tast trykkes mens du skriver i inndatafeltet, logges den trykkede tasten til konsollen.

Praktisk eksempel: Håndtering av validering av skjema ved innsending

La oss lage en logikk for validering av skjema før innsending.

index.html

index.html

index.css

index.css

index.js

index.js

copy

submit-hendelseslytteren sørger for at skjemaet ikke sendes inn dersom de påkrevde feltene er tomme. Hvis enten brukernavn- eller passordfeltet er tomt, forhindres hendelsen fra å fortsette, og en feilmelding vises.

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

2. Hvilken av følgende er IKKE en gyldig hendelsestype for addEventListener()?

question mark

Hva er formålet med addEventListener()?

Select the correct answer

question mark

Hvilken av følgende er IKKE en gyldig hendelsestype for addEventListener()?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 1
some-alt