Introduktion till Händelser och Händelselyssnare
Vad är händelser i JavaScript?
JavaScript tillhandahåller mekanismer för att hantera dessa händelser och köra specifik kod som svar, vilket gör din webbapplikation interaktiv och dynamisk.
Vanliga händelsetyper
Förklaring av addEventListener() och hur man kopplar händelselyssnare
För att reagera på händelser i JavaScript kopplas en händelselyssnare till ett element. Den vanligaste metoden för detta är funktionen addEventListener(), som lyssnar efter specifika händelser och anropar en funktion när händelsen inträffar.
element.addEventListener('event', function, useCapture);
event: Typen av händelse som ska övervakas (t.ex.'click','submit');function: Callback-funktionen som körs när händelsen utlöses;useCapture(valfritt): Ett booleskt värde som anger om händelsen ska fångas under capture- eller bubble-fasen (standard ärfalse, vilket innebär att den lyssnar under bubble-fasen).
Klickhändelselyssnare
Här kopplas en click-händelselyssnare till knappen. Vid klick utlöses en alert.
index.html
index.css
index.js
Händelselyssnaren är kopplad till elementet #myButton, och när användaren klickar på knappen visas en meddelanderuta med texten "Button clicked!"
Submit-händelselyssnare
Lägg till en händelselyssnare för submit-händelsen, vilket förhindrar standardbeteendet för formulärinlämning för att hantera data med JavaScript.
index.html
index.css
index.js
En händelselyssnare på formulärets submit-händelse förhindrar standardinlämningen med event.preventDefault(), vilket möjliggör att anpassad JavaScript hanterar datan istället. Vid inlämning hämtas det angivna namnet och visas i ett stycke med ID displayName.
Keypress-händelse
Låt oss koppla en keypress-händelselyssnare till inmatningsfältet. När en tangent trycks ned kommer den att visas i stycket.
index.html
index.css
index.js
Varje gång en tangent trycks ned vid inmatning i fältet loggas den tryckta tangenten i konsolen.
Praktiskt exempel: Hantering av formulärvalidering vid inskickning
Skapa en logik för formulärvalidering innan formuläret skickas in.
index.html
index.css
index.js
submit-händelselyssnaren säkerställer att formuläret inte skickas om de obligatoriska fälten är tomma. Om antingen användarnamn eller lösenordsfältet är tomt förhindras händelsen från att fortsätta och ett felmeddelande visas.
1. Vad är syftet med addEventListener()?
2. Vilken av följande är INTE en giltig händelsetyp för addEventListener()?
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
Awesome!
Completion rate improved to 2.22Introduktion till Händelser och Händelselyssnare
Svep för att visa menyn
Vad är händelser i JavaScript?
JavaScript tillhandahåller mekanismer för att hantera dessa händelser och köra specifik kod som svar, vilket gör din webbapplikation interaktiv och dynamisk.
Vanliga händelsetyper
Förklaring av addEventListener() och hur man kopplar händelselyssnare
För att reagera på händelser i JavaScript kopplas en händelselyssnare till ett element. Den vanligaste metoden för detta är funktionen addEventListener(), som lyssnar efter specifika händelser och anropar en funktion när händelsen inträffar.
element.addEventListener('event', function, useCapture);
event: Typen av händelse som ska övervakas (t.ex.'click','submit');function: Callback-funktionen som körs när händelsen utlöses;useCapture(valfritt): Ett booleskt värde som anger om händelsen ska fångas under capture- eller bubble-fasen (standard ärfalse, vilket innebär att den lyssnar under bubble-fasen).
Klickhändelselyssnare
Här kopplas en click-händelselyssnare till knappen. Vid klick utlöses en alert.
index.html
index.css
index.js
Händelselyssnaren är kopplad till elementet #myButton, och när användaren klickar på knappen visas en meddelanderuta med texten "Button clicked!"
Submit-händelselyssnare
Lägg till en händelselyssnare för submit-händelsen, vilket förhindrar standardbeteendet för formulärinlämning för att hantera data med JavaScript.
index.html
index.css
index.js
En händelselyssnare på formulärets submit-händelse förhindrar standardinlämningen med event.preventDefault(), vilket möjliggör att anpassad JavaScript hanterar datan istället. Vid inlämning hämtas det angivna namnet och visas i ett stycke med ID displayName.
Keypress-händelse
Låt oss koppla en keypress-händelselyssnare till inmatningsfältet. När en tangent trycks ned kommer den att visas i stycket.
index.html
index.css
index.js
Varje gång en tangent trycks ned vid inmatning i fältet loggas den tryckta tangenten i konsolen.
Praktiskt exempel: Hantering av formulärvalidering vid inskickning
Skapa en logik för formulärvalidering innan formuläret skickas in.
index.html
index.css
index.js
submit-händelselyssnaren säkerställer att formuläret inte skickas om de obligatoriska fälten är tomma. Om antingen användarnamn eller lösenordsfältet är tomt förhindras händelsen från att fortsätta och ett felmeddelande visas.
1. Vad är syftet med addEventListener()?
2. Vilken av följande är INTE en giltig händelsetyp för addEventListener()?
Tack för dina kommentarer!
