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.22Introduksjon 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!
