Introduktion til Events og Event Listeners

Hvad er events i JavaScript?

JavaScript tilbyder mekanismer til at håndtere disse events og udføre specifik kode som reaktion, hvilket gør din webapplikation interaktiv og dynamisk.

Almindelige event-typer

Forklaring af addEventListener() og hvordan man tilføjer event listeners

For at reagere på events i JavaScript, tilføjes en event listener til et element. Den mest almindelige metode til dette er funktionen addEventListener(), som lytter efter specifikke events og kalder en funktion, når eventen opstår.

element.addEventListener('event', function, useCapture);

• event: Typen af event, du vil lytte efter (f.eks. 'click', 'submit');
• function: Callback-funktionen, der udføres, når eventen udløses;
• useCapture (valgfri): En boolean, der angiver, om eventen skal fanges under capture- eller bubbling-fasen (standard er false, hvilket betyder, at der lyttes under bubbling-fasen).

Click event listener

Tilføjelse af en click event listener til knappen. Når der klikkes, udløses en alert.

Event-lytteren er tilknyttet #myButton-elementet, og når brugeren klikker på knappen, vises en beskedboks med teksten "Button clicked!"

Submit event-lytter

Tilføjelse af en event-lytter for submit-begivenheden, som forhindrer standardformularens indsendelsesadfærd for at håndtere dataene med JavaScript.

En event-lytter på formularens submit-begivenhed forhindrer den standardmæssige indsendelse med event.preventDefault(), hvilket gør det muligt for brugerdefineret JavaScript at håndtere dataene i stedet. Ved indsendelse hentes det indtastede navn og vises i et afsnit med ID'et displayName.

Keypress-begivenhed

Lad os tilføje en keypress event-lytter til inputfeltet. Når en tast trykkes ned, vises den i afsnittet.

Hver gang en tast trykkes ned, mens der skrives i inputfeltet, logges den trykkede tast i konsollen.

Praktisk eksempel: Håndtering af formularvalidering ved indsendelse

Oprettelse af logik til validering af formularen før indsendelse.

submit-hændelseslytteren sikrer, at formularen ikke indsendes, hvis de påkrævede felter er tomme. Hvis enten brugernavn eller adgangskodefeltet er tomt, forhindres hændelsen i at fortsætte, og en fejlmeddelelse vises.