Introduksjon 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 erfalse
, 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.css
index.js
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.css
index.js
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.css
index.js
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.css
index.js
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()
?
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
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
Introduksjon 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 erfalse
, 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.css
index.js
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.css
index.js
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.css
index.js
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.css
index.js
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()
?
Takk for tilbakemeldingene dine!