Articles
Introduksjon til TypeScript
Hendelseshåndtering i TypeScript

Hendelseshåndtering i TypeScript

Denne artikkelen forklarer hendelseshåndtering i TypeScript.

Du kan lære om metoder for hendelseshåndtering og egendefinerte hendelser gjennom kodeeksempler.

YouTube Video

Hendelseshåndtering i TypeScript

Hendelseshåndtering i TypeScript gjøres på samme måte som i JavaScript. TypeScript forbedrer imidlertid typesikkerheten, slik at du trygt kan håndtere hendelser ved å bruke riktige hendelsestyper. Grunnlaget for hendelseshåndtering innebærer å legge til hendelseslyttere på DOM-elementer og utføre handlinger som svar på brukeroperasjoner.

Legge til hendelseslyttere

Hendelseslyttere legges til DOM-elementer med metoden addEventListener. For eksempel, for å håndtere et klikkhendelse, gjør du følgende:.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event) => {
4        console.log('Button was clicked');
5    });
6}
  • I denne koden brukes addEventListener for å registrere en hendelsesbehandler for klikkhendelsen på det angitte DOM-elementet.

Hendelsestyper i TypeScript

I TypeScript får event-objektet som mottas i hendelseslytteren automatisk riktig type. event-objektet har ulike egenskaper avhengig av hendelsestypen, men basistypen er Event.

Ved å bruke riktig type for hver hendelse, kan du dra nytte av TypeScripts typesikkerhet i utviklingen din.

Viktigste hendelsestyper

  1. Event Event er basistypen for vanlige hendelser. Brukes til ting som innsending av skjemaer eller fullført lasting av sider.
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 koden fanger opp formens submit-hendelse, forhindrer standard innsending, og skriver ut en melding til konsollen i stedet.

  1. MouseEvent

    MouseEvent er en hendelsestype knyttet til musehandlinger som klikk og musebevegelser. Du kan få informasjon om musekoordinatene og hvilken knapp som ble klikket.

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 koden henter musekoordinatene når knappen klikkes og viser dem i konsollen.
  1. KeyboardEvent KeyboardEvent er en hendelsestype knyttet til tastaturinngang. Du kan få tilgang til hvilken tast som ble trykket, samt tilstanden til modifikatortaster (Shift, Alt, Ctrl, etc.).
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 koden viser navnet på tasten som ble trykket, og hvis Ctrl-tasten holdes nede, skrives også denne informasjonen til konsollen.
  1. InputEvent InputEvent er en hendelsestype knyttet til endringer i inndatafelt. Brukes når verdien av et tekstfelt eller textarea er endret.
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 koden viser innholdet i inndatafeltet i konsollen hver gang verdien endres.
  1. FocusEvent FocusEvent er en hendelsestype som oppstå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 koden viser «Focused» i konsollen når inndatafeltet er fokusert, og «Blurred» når det mister fokus.

Håndtering av egendefinerte hendelser med typepåstand

For egendefinerte hendelser, eller når Typescripts typeinferanse ikke fungerer, kan du eksplisitt angi typen med typepåstand.

For eksempel, for å håndtere en hendelse for et spesifikt inndatafelt (HTMLInputElement), spesifiser type slik:.

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 koden bruker type assertion for å behandle event-target som en HTMLInputElement og viser verdien i konsollen.

Fjerne hendelseslyttere

Du kan fjerne hendelseslyttere med removeEventListener. For dette må du sende inn samme hendelsesbehandler som ble lagt til opprinnelig.

 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 koden legger til en klikklisteener på knappen, og fjerner den deretter ved å spesifisere samme håndterer.

Opprette egendefinerte hendelser

I TypeScript kan du i tillegg til standardhendelser også opprette og sende egendefinerte hendelser. Bruk CustomEvent-klassen for å opprette en egendefinert hendelse og utløse 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 koden lager en egendefinert hendelse med CustomEvent, sender den til elementet, og viser detaljene i konsollen.

Kontrollere hendelsesspredning

Når en hendelse oppstår, bobler den som standard (propagerer til overordnede elementer). For å forhindre dette, bruk event.stopPropagation(). Du kan også bruke preventDefault() for å forhindre nettleserens standardoppførsel.

 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 koden deaktiverer standardhandlingen når knappen klikkes, stopper hendelsen fra bobling, og kjører egendefinert behandling.

Sammendrag

Hendelseshåndtering i TypeScript er i hovedsak det samme som i JavaScript, men med riktige typedefinisjoner kan du trygt og pålitelig jobbe med hendelsesobjekter og DOM-elementer. Ved å legge til og fjerne hendelseslyttere, bruke hendelsestyper og typepåstander, kan du oppnå klarere og mindre feilutsatt hendelseshåndtering.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Shadow DOM i TypeScriptHente/XMLHttpRequest i TypeScript