Articles
Introduktion til TypeScript
Event-håndtering i TypeScript

Event-håndtering i TypeScript

Denne artikel forklarer, hvordan man håndterer begivenheder i TypeScript.

Du kan lære om metoder til begivenhedshåndtering og brugerdefinerede begivenheder gennem kodeeksempler.

YouTube Video

Event-håndtering i TypeScript

Event-håndtering i TypeScript udføres på samme måde som i JavaScript. Dog forbedrer TypeScript typesikkerheden, så du sikkert kan håndtere events ved at bruge passende event-typer. Grundlaget for event-håndtering indebærer at tilføje event listeners til DOM-elementer og udføre handlinger som svar på brugeroperationer.

Tilføjelse af event listeners

Event listeners tilføjes til DOM-elementer ved hjælp af metoden addEventListener. For eksempel, for at håndtere et klik-event, vil du gøre følgende:.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event) => {
4        console.log('Button was clicked');
5    });
6}
  • I denne kode bruges addEventListener til at registrere en handler for klik-begivenheden på det angivne DOM-element.

Event-typer i TypeScript

I TypeScript får event-objektet i event listeneren automatisk tildelt den passende type. event-objektet har forskellige egenskaber afhængigt af event-typen, men dens basistype er Event.

Ved at bruge den passende type for hver event, kan du udnytte TypeScripts typesikkerhed i din udvikling.

Vigtigste event-typer

  1. Event Event er grundtypen for almindelige begivenheder. Bruges til ting som formularindsendelser eller når en side er indlæst.
1const form = document.getElementById('myForm');
2if (form) {
3    form.addEventListener('submit', (event: Event) => {
4        event.preventDefault();  // Prevent the default form submission
5        console.log('Form was submitted');
6    });
7}
  • Denne kode registrerer formens submit-begivenhed, forhindrer den normale submit-handling og udskriver i stedet en meddelelse til konsollen.

  1. MouseEvent

    MouseEvent er en begivenhedstype, der relaterer sig til musehandlinger som klik og musens bevægelser. Du kan få information om musens koordinater og hvilken knap der blev klikket på.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event: MouseEvent) => {
4        // Log the click position
5        console.log(`Click position: X=${event.clientX}, Y=${event.clientY}`);
6    });
7}
  • Denne kode henter musens koordinater, når knappen klikkes, og viser dem i konsollen.
  1. KeyboardEvent KeyboardEvent er en begivenhedstype, der relaterer sig til tastaturinput. Du kan tilgå den tast, der blev trykket på, samt status for modifikatortaster (Shift, Alt, Ctrl osv.).
1document.addEventListener('keydown', (event: KeyboardEvent) => {
2    // Log the pressed key
3    console.log(`Key pressed: ${event.key}`);
4    if (event.ctrlKey) {
5        // Log that the Ctrl key was pressed
6        console.log('Ctrl key was pressed');
7    }
8});
  • Denne kode viser navnet på den trykkede tast og udskriver også denne information til konsollen, hvis Ctrl-tasten holdes nede.
  1. InputEvent InputEvent er en begivenhedstype for ændringer i inputfelter. Den bruges, når værdien af et tekstfelt eller textarea er ændret.
1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: InputEvent) => {
4        // Log the entered value
5        console.log(`Entered value: ${input.value}`);
6    });
7}
  • Denne kode viser indholdet af inputfeltet i konsollen, hver gang dets værdi ændres.
  1. FocusEvent FocusEvent er en begivenhedstype, der opstår, når et element får eller mister fokus.
 1const input = document.getElementById('myInput');
 2if (input) {
 3    input.addEventListener('focus', (event: FocusEvent) => {
 4        // Log when the input gains focus
 5        console.log('Focused');
 6    });
 7
 8    input.addEventListener('blur', (event: FocusEvent) => {
 9        // Log when the input loses focus
10        console.log('Blurred');
11    });
12}
  • Denne kode viser "Focused" i konsollen, når inputfeltet har fokus, og "Blurred" når det mister fokus.

Håndtering af brugerdefinerede events med type assertion

For brugerdefinerede events eller når TypeScripts typeinference ikke virker, kan du eksplicit angive typen ved at bruge type assertion.

For eksempel, for at håndtere en event for et specifikt inputfelt (HTMLInputElement), angiv typen som følger:.

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: Event) => {
4        const target = event.target as HTMLInputElement;
5        // Log the entered value
6        console.log(`Entered value: ${target.value}`);
7    });
8}
  • Denne kode bruger type-assertion for at behandle event target som et HTMLInputElement og viser dets værdi i konsollen.

Fjernelse af event listeners

Du kan fjerne event listeners ved at bruge removeEventListener. For dette skal du bruge samme event handler, som blev tilføjet oprindeligt.

 1const button = document.getElementById('myButton');
 2
 3const handleClick = (event: MouseEvent) => {
 4    // Log when the button is clicked
 5    console.log('Button was clicked');
 6};
 7
 8if (button) {
 9    button.addEventListener('click', handleClick);
10
11    // Remove the event listener later
12    button.removeEventListener('click', handleClick);
13}
  • Denne kode tilføjer en klik-begivenhedslytter til knappen og fjerner den derefter ved at bruge den samme handler.

Oprettelse af brugerdefinerede events

I TypeScript kan du, udover standard-events, også oprette og udsende brugerdefinerede events. Brug CustomEvent-klassen til at oprette en brugerdefineret event og udløs den med dispatchEvent-metoden.

 1const customEvent = new CustomEvent('myCustomEvent', { detail: { name: 'TypeScript' } });
 2const div = document.getElementById('myDiv');
 3
 4if (div) {
 5    div.addEventListener('myCustomEvent', (event: CustomEvent) => {
 6        // Log when the custom event is fired
 7        console.log(`Custom event was triggered: ${event.detail.name}`);
 8    });
 9
10    div.dispatchEvent(customEvent);  // Dispatch the custom event
11}
  • Denne kode opretter en brugerdefineret begivenhed med CustomEvent, sender den til elementet og viser dens detaljer i konsollen.

Styring af event-propagation

Når en event opstår, bobler den som standard opad (propagerer til overordnede elementer). For at forhindre dette, brug event.stopPropagation(). Du kan også bruge preventDefault() for at forhindre browserens standardadfærd.

 1const button = document.getElementById('myButton');
 2if (button) {
 3    button.addEventListener('click', (event: MouseEvent) => {
 4        event.preventDefault();  // Prevent the default action
 5        event.stopPropagation();  // Stop the event propagation
 6
 7        // Log that event handling has been customized
 8        console.log('Custom event handling');
 9    });
10}
  • Denne kode deaktiverer standardhandlingen, når der klikkes på knappen, stopper event-bobling og udfører brugerdefineret behandling.

Sammendrag

Event-håndtering i TypeScript er grundlæggende det samme som i JavaScript, men med korrekte typedefinitioner kan du sikkert og pålideligt arbejde med event-objekter og DOM-elementer. Ved at tilføje og fjerne event listeners, anvende event-typer og bruge type assertions, kan du opnå mere klar og mindre fejlsensitiv event-håndtering.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Shadow DOM i TypeScriptFetch/XMLHttpRequest i TypeScript