Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Introduktion till Händelser och Händelselyssnare | Händelsehantering och Användarinteraktioner i JavaScript
Avancerad JavaScript-mästerskap

bookIntroduktion 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 är false, 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.html

index.css

index.css

index.js

index.js

copy

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.html

index.css

index.css

index.js

index.js

copy

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.html

index.css

index.css

index.js

index.js

copy

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.html

index.css

index.css

index.js

index.js

copy

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()?

question mark

Vad är syftet med addEventListener()?

Select the correct answer

question mark

Vilken av följande är INTE en giltig händelsetyp för addEventListener()?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 1

Fråga AI

expand

Fråga AI

ChatGPT

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

bookIntroduktion 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 är false, 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.html

index.css

index.css

index.js

index.js

copy

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.html

index.css

index.css

index.js

index.js

copy

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.html

index.css

index.css

index.js

index.js

copy

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.html

index.css

index.css

index.js

index.js

copy

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()?

question mark

Vad är syftet med addEventListener()?

Select the correct answer

question mark

Vilken av följande är INTE en giltig händelsetyp för addEventListener()?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 1
some-alt