Förståelse av Eventobjektet i JavaScript
När en händelse inträffar i JavaScript skickas automatiskt ett event-objekt till händelsehanteraren. Detta objekt innehåller viktig information om händelsen, såsom elementet som utlöste den (target), typen av händelse (type) och metoder för att kontrollera händelsens beteende, som preventDefault() och stopPropagation().
Åtkomst till händelserelaterad information
event-objektet innehåller flera användbara egenskaper och metoder som gör det möjligt att få tillgång till information om händelsen och interagera med den.
target
Egenskapen target avser det element som utlöste händelsen. Den hjälper oss att avgöra vilket element som klickades på, hovrades över eller interagerades med.
index.html
index.css
index.js
event.target används för att identifiera den specifika knapp som klickades på, och dess id visas i paragrafen med ID display.
type
Egenskapen type anger vilken typ av händelse som inträffade (t.ex. click, submit, keydown).
index.html
index.css
index.js
event.type visas i stycket som återkoppling, vilket visar att en click-händelse har inträffat. Dessutom ändras bakgrundsfärgen på hela body till lightblue när knappen klickas.
preventDefault()-metoden i Event-objektet
Metoden preventDefault() stoppar standardbeteendet för ett element, såsom att förhindra att en länk navigerar eller att ett formulär skickas.
index.html
index.css
index.js
Här förhindrar preventDefault() standardåtgärden (att navigera till en ny sida) vid klick på länken. Istället visas en varning.
Praktiskt exempel: Hantering av formulärinlämning och användning av eventobjekt
Validering av formulär, förhindra inlämning om fält är tomma, samt visa formulärets data tillsammans med eventrelaterad information såsom target, type och hur preventDefault() förhindrar standardinlämning av formulär.
index.html
index.css
index.js
När formuläret "Sign Up" skickas in, fångar en eventlyssnare upp inskickningen med event.preventDefault(). Om antingen användarnamn eller lösenordsfältet är tomt visas ett felmeddelande; annars visas ett bekräftelsemeddelande med det inskickade användarnamnet. Dessutom visas detaljer om händelsen—såsom typ, formulärets ID och om standardåtgärden förhindrades—i en särskild sektion. Formuläret återställs därefter för fortsatt användning.
1. Vilken information tillhandahåller egenskapen event.target?
2. Varför kan du använda event.preventDefault() vid ett formulärsändningsevenemang?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
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.22Förståelse av Eventobjektet i JavaScript
Svep för att visa menyn
När en händelse inträffar i JavaScript skickas automatiskt ett event-objekt till händelsehanteraren. Detta objekt innehåller viktig information om händelsen, såsom elementet som utlöste den (target), typen av händelse (type) och metoder för att kontrollera händelsens beteende, som preventDefault() och stopPropagation().
Åtkomst till händelserelaterad information
event-objektet innehåller flera användbara egenskaper och metoder som gör det möjligt att få tillgång till information om händelsen och interagera med den.
target
Egenskapen target avser det element som utlöste händelsen. Den hjälper oss att avgöra vilket element som klickades på, hovrades över eller interagerades med.
index.html
index.css
index.js
event.target används för att identifiera den specifika knapp som klickades på, och dess id visas i paragrafen med ID display.
type
Egenskapen type anger vilken typ av händelse som inträffade (t.ex. click, submit, keydown).
index.html
index.css
index.js
event.type visas i stycket som återkoppling, vilket visar att en click-händelse har inträffat. Dessutom ändras bakgrundsfärgen på hela body till lightblue när knappen klickas.
preventDefault()-metoden i Event-objektet
Metoden preventDefault() stoppar standardbeteendet för ett element, såsom att förhindra att en länk navigerar eller att ett formulär skickas.
index.html
index.css
index.js
Här förhindrar preventDefault() standardåtgärden (att navigera till en ny sida) vid klick på länken. Istället visas en varning.
Praktiskt exempel: Hantering av formulärinlämning och användning av eventobjekt
Validering av formulär, förhindra inlämning om fält är tomma, samt visa formulärets data tillsammans med eventrelaterad information såsom target, type och hur preventDefault() förhindrar standardinlämning av formulär.
index.html
index.css
index.js
När formuläret "Sign Up" skickas in, fångar en eventlyssnare upp inskickningen med event.preventDefault(). Om antingen användarnamn eller lösenordsfältet är tomt visas ett felmeddelande; annars visas ett bekräftelsemeddelande med det inskickade användarnamnet. Dessutom visas detaljer om händelsen—såsom typ, formulärets ID och om standardåtgärden förhindrades—i en särskild sektion. Formuläret återställs därefter för fortsatt användning.
1. Vilken information tillhandahåller egenskapen event.target?
2. Varför kan du använda event.preventDefault() vid ett formulärsändningsevenemang?
Tack för dina kommentarer!
