Forståelse af Event-Objektet i JavaScript
Når en begivenhed opstår i JavaScript, bliver et event-objekt automatisk sendt til event handleren. Dette objekt indeholder vigtig information om begivenheden, såsom det element der udløste den (target), typen af begivenhed (type), samt metoder til at kontrollere begivenhedens adfærd, som preventDefault() og stopPropagation().
Adgang til begivenhedsrelateret information
event-objektet indeholder flere nyttige egenskaber og metoder, der gør det muligt at tilgå information om begivenheden og interagere med den.
target
Egenskaben target refererer til det element, der udløste begivenheden. Den hjælper med at afgøre, hvilket element der blev klikket på, peget over eller interageret med.
index.html
index.css
index.js
event.target bruges til at identificere den specifikke knap, der blev klikket på, og dens id vises i afsnittet med ID'et display.
type
Egenskaben type angiver typen af den hændelse, der fandt sted (f.eks. click, submit, keydown).
index.html
index.css
index.js
event.type vises i afsnittet som feedback, hvilket indikerer, at en click-hændelse er indtruffet. Når knappen klikkes, ændres baggrundsfarven på hele body til lightblue.
preventDefault()-metoden i Event-objektet
Metoden preventDefault() stopper standardadfærden for et element, såsom at forhindre et link i at navigere eller forhindre en formular i at blive sendt.
index.html
index.css
index.js
Her forhindrer preventDefault() standardhandlingen (at navigere til en ny side), når linket klikkes. I stedet vises en advarsel.
Praktisk eksempel: Håndtering af formularindsendelse og brug af event-objekt
Validering af en formular, forhindring af indsendelse hvis felter er tomme, samt visning af formularens data sammen med event-relateret information såsom target, type og hvordan preventDefault() forhindrer standardformularindsendelse.
index.html
index.css
index.js
Når "Tilmeld"-formularen indsendes, opfanger en event-lytter indsendelsen med event.preventDefault(). Hvis enten brugernavn eller adgangskodefeltet er tomt, vises en fejlmeddelelse; ellers vises en succesmeddelelse, der viser det indsendte brugernavn. Derudover vises detaljer om hændelsen—såsom type, formular-ID og om standardhandlingen blev forhindret—i en dedikeret sektion. Formularen nulstilles derefter til videre brug.
1. Hvilken information giver event.target-egenskaben?
2. Hvorfor kan man bruge event.preventDefault() i en form-indsendelsesbegivenhed?
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 2.22Forståelse af Event-Objektet i JavaScript
Stryg for at vise menuen
Når en begivenhed opstår i JavaScript, bliver et event-objekt automatisk sendt til event handleren. Dette objekt indeholder vigtig information om begivenheden, såsom det element der udløste den (target), typen af begivenhed (type), samt metoder til at kontrollere begivenhedens adfærd, som preventDefault() og stopPropagation().
Adgang til begivenhedsrelateret information
event-objektet indeholder flere nyttige egenskaber og metoder, der gør det muligt at tilgå information om begivenheden og interagere med den.
target
Egenskaben target refererer til det element, der udløste begivenheden. Den hjælper med at afgøre, hvilket element der blev klikket på, peget over eller interageret med.
index.html
index.css
index.js
event.target bruges til at identificere den specifikke knap, der blev klikket på, og dens id vises i afsnittet med ID'et display.
type
Egenskaben type angiver typen af den hændelse, der fandt sted (f.eks. click, submit, keydown).
index.html
index.css
index.js
event.type vises i afsnittet som feedback, hvilket indikerer, at en click-hændelse er indtruffet. Når knappen klikkes, ændres baggrundsfarven på hele body til lightblue.
preventDefault()-metoden i Event-objektet
Metoden preventDefault() stopper standardadfærden for et element, såsom at forhindre et link i at navigere eller forhindre en formular i at blive sendt.
index.html
index.css
index.js
Her forhindrer preventDefault() standardhandlingen (at navigere til en ny side), når linket klikkes. I stedet vises en advarsel.
Praktisk eksempel: Håndtering af formularindsendelse og brug af event-objekt
Validering af en formular, forhindring af indsendelse hvis felter er tomme, samt visning af formularens data sammen med event-relateret information såsom target, type og hvordan preventDefault() forhindrer standardformularindsendelse.
index.html
index.css
index.js
Når "Tilmeld"-formularen indsendes, opfanger en event-lytter indsendelsen med event.preventDefault(). Hvis enten brugernavn eller adgangskodefeltet er tomt, vises en fejlmeddelelse; ellers vises en succesmeddelelse, der viser det indsendte brugernavn. Derudover vises detaljer om hændelsen—såsom type, formular-ID og om standardhandlingen blev forhindret—i en dedikeret sektion. Formularen nulstilles derefter til videre brug.
1. Hvilken information giver event.target-egenskaben?
2. Hvorfor kan man bruge event.preventDefault() i en form-indsendelsesbegivenhed?
Tak for dine kommentarer!
