Forståelse av Event-Objektet i JavaScript
Når en hendelse oppstår i JavaScript, blir et event-objekt automatisk sendt til hendelsesbehandleren. Dette objektet inneholder viktig informasjon om hendelsen, som elementet som utløste den (target), typen hendelse (type), og metoder for å kontrollere hendelsens oppførsel, som preventDefault() og stopPropagation().
Tilgang til hendelsesrelatert informasjon
event-objektet inneholder flere nyttige egenskaper og metoder som lar deg få tilgang til informasjon om hendelsen og samhandle med den.
target
Egenskapen target refererer til elementet som utløste hendelsen. Den hjelper oss å avgjøre hvilket element som ble klikket på, holdt over, eller interagert med.
index.html
index.css
index.js
event.target brukes for å identifisere hvilken knapp som ble klikket, og dens id vises i paragrafen med ID-en display.
type
Egenskapen type angir hvilken type hendelse som har oppstått (for eksempel click, submit, keydown).
index.html
index.css
index.js
event.type vises i avsnittet som tilbakemelding, og indikerer at en click-hendelse har skjedd. Når knappen klikkes, endres også bakgrunnsfargen på hele body til lightblue.
preventDefault()-metoden i hendelsesobjektet
Metoden preventDefault() stopper standardoppførselen til et element, for eksempel å hindre at en lenke navigerer bort eller at et skjema sendes inn.
index.html
index.css
index.js
Her forhindrer preventDefault() standardhandlingen (navigering til en ny side) når lenken klikkes. I stedet vises en varsling.
Praktisk eksempel: Håndtering av innsending av skjema og bruk av hendelsesobjekt
Validering av et skjema, forhindre innsending hvis feltene er tomme, og vise skjemaets data sammen med hendelsesrelatert informasjon som target, type, og hvordan preventDefault() forhindrer standard innsending av skjema.
index.html
index.css
index.js
Når "Registrer deg"-skjemaet sendes inn, avskjærer en hendelseslytter innsendingen med event.preventDefault(). Hvis enten brukernavn- eller passordfeltet er tomt, vises en feilmelding; ellers vises en suksessmelding som viser det innsendte brukernavnet. I tillegg vises detaljer om hendelsen—som type, skjema-ID og om standardhandlingen ble forhindret—i en dedikert seksjon. Skjemaet tilbakestilles deretter for videre bruk.
1. Hvilken informasjon gir event.target-egenskapen?
2. Hvorfor kan du bruke event.preventDefault() i en hendelse for innsending av skjema?
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
Can you explain how to use event.target in a real example?
What other useful properties are available on the event object?
How does preventDefault() differ from stopPropagation()?
Awesome!
Completion rate improved to 2.22Forståelse av Event-Objektet i JavaScript
Sveip for å vise menyen
Når en hendelse oppstår i JavaScript, blir et event-objekt automatisk sendt til hendelsesbehandleren. Dette objektet inneholder viktig informasjon om hendelsen, som elementet som utløste den (target), typen hendelse (type), og metoder for å kontrollere hendelsens oppførsel, som preventDefault() og stopPropagation().
Tilgang til hendelsesrelatert informasjon
event-objektet inneholder flere nyttige egenskaper og metoder som lar deg få tilgang til informasjon om hendelsen og samhandle med den.
target
Egenskapen target refererer til elementet som utløste hendelsen. Den hjelper oss å avgjøre hvilket element som ble klikket på, holdt over, eller interagert med.
index.html
index.css
index.js
event.target brukes for å identifisere hvilken knapp som ble klikket, og dens id vises i paragrafen med ID-en display.
type
Egenskapen type angir hvilken type hendelse som har oppstått (for eksempel click, submit, keydown).
index.html
index.css
index.js
event.type vises i avsnittet som tilbakemelding, og indikerer at en click-hendelse har skjedd. Når knappen klikkes, endres også bakgrunnsfargen på hele body til lightblue.
preventDefault()-metoden i hendelsesobjektet
Metoden preventDefault() stopper standardoppførselen til et element, for eksempel å hindre at en lenke navigerer bort eller at et skjema sendes inn.
index.html
index.css
index.js
Her forhindrer preventDefault() standardhandlingen (navigering til en ny side) når lenken klikkes. I stedet vises en varsling.
Praktisk eksempel: Håndtering av innsending av skjema og bruk av hendelsesobjekt
Validering av et skjema, forhindre innsending hvis feltene er tomme, og vise skjemaets data sammen med hendelsesrelatert informasjon som target, type, og hvordan preventDefault() forhindrer standard innsending av skjema.
index.html
index.css
index.js
Når "Registrer deg"-skjemaet sendes inn, avskjærer en hendelseslytter innsendingen med event.preventDefault(). Hvis enten brukernavn- eller passordfeltet er tomt, vises en feilmelding; ellers vises en suksessmelding som viser det innsendte brukernavnet. I tillegg vises detaljer om hendelsen—som type, skjema-ID og om standardhandlingen ble forhindret—i en dedikert seksjon. Skjemaet tilbakestilles deretter for videre bruk.
1. Hvilken informasjon gir event.target-egenskapen?
2. Hvorfor kan du bruke event.preventDefault() i en hendelse for innsending av skjema?
Takk for tilbakemeldingene dine!
