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 typer av händelser

Förklaring av addEventListener() och hur man kopplar eventlyssnare

För att reagera på händelser i JavaScript kopplas en eventlyssnare 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 lyssnas efter (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).

Click-eventlyssnare

Här kopplas en click-eventlyssnare till knappen. Vid klick utlöses en alert.

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, som förhindrar standardbeteendet för formulärinlämning för att hantera data med JavaScript.

En eventlyssnare 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

Vi lägger till en keypress-eventlyssnare på inmatningsfältet. När en tangent trycks ned kommer den att visas i stycket.

Varje gång en tangent trycks ned när du skriver i inmatningsfä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.

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.