Händelsehantering i TypeScript

Articles

Denna artikel förklarar händelsehantering i TypeScript.

Du kan lära dig om metoder för händelsehantering och anpassade händelser genom kodexempel.

YouTube Video

Händelsehantering i TypeScript

Händelsehantering i TypeScript görs på samma sätt som i JavaScript. Men TypeScript förbättrar typsäkerheten, vilket gör det möjligt att hantera händelser på ett säkert sätt genom att använda lämpliga händelsetyper. Grunderna för händelsehantering innebär att lägga till händelselyssnare på DOM-element och utföra åtgärder som svar på användarens åtgärder.

Lägga till händelselyssnare

Händelselyssnare läggs till på DOM-element med metoden addEventListener. Till exempel, för att hantera en klick-händelse, gör du så här:.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event) => {
4        console.log('Button was clicked');
5    });
6}

I den här koden används addEventListener för att registrera en hanterare för klickhändelsen på det angivna DOM-elementet.

Händelsetyper i TypeScript

I TypeScript tilldelas event-objektet som tas emot i händelselyssnaren automatiskt rätt typ. event-objektet har olika egenskaper beroende på händelsetypen, men dess bas-typ är Event.

Genom att använda rätt typ för varje händelse kan du dra nytta av TypeScripts typsäkerhet i din utveckling.

Huvudsakliga händelsetyper

Event Event är bastypen för vanliga händelser. Används för saker som formulärinlämningar eller när en sida har laddats klart.

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}

Den här koden fångar formens skickahändelse, förhindrar standardåtgärden och skriver ut ett meddelande i konsolen istället.

MouseEvent

MouseEvent är en händelsetyp relaterad till musåtgärder såsom klick och musrörelse. Du kan få information om muskoordinater och vilken knapp som trycktes in.

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}

Den här koden hämtar muskoordinaterna när knappen klickas och visar dem i konsolen.

KeyboardEvent KeyboardEvent är en händelsetyp relaterad till tangentbordsinmatning. Du kan komma åt den nedtryckta tangenten och tillståndet för modifieringstangenterna (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});

Den här koden visar namnet på den tangent som tryckts ned, och om Ctrl-tangenten hålls ner, visas även den informationen i konsolen.

InputEvent InputEvent är en händelsetyp relaterad till förändringar i inmatningsfält. Den används när värdet i ett textfält eller en textarea har ändrats.

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}

Den här koden visar innehållet i inmatningsfältet i konsolen varje gång dess värde ändras.

FocusEvent FocusEvent är en händelsetyp som inträffar när ett element får eller tappar 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}

Den här koden visar "Fokuserad" i konsolen när inmatningsfältet är fokuserat, och "Ur fokus" när det tappar fokus.

Hantera egna händelser med typassertion

För egna händelser eller när TypeScripts typinferens inte räcker, kan du uttryckligen ange typen med typassertion.

Till exempel, för att hantera en händelse för ett specifikt inmatningsfält (HTMLInputElement), ange typen så här:.

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}

Den här koden använder typkontroll för att behandla händelsens mål som en HTMLInputElement och visar dess värde i konsolen.

Ta bort händelselyssnare

Du kan ta bort händelselyssnare med removeEventListener. För detta måste du skicka in samma händelsehanterare som lades till från början.

 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}

Den här koden lägger till en klickhändelsehanterare på knappen och tar sedan bort den genom att specificera samma hanterare.

Skapa egna händelser

I TypeScript kan du, utöver standardhändelser, även skapa och skicka egna händelser. Använd CustomEvent-klassen för att skapa en egen händelse och trigga 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}

Den här koden skapar en anpassad händelse med hjälp av CustomEvent, skickar den till elementet och visar dess detaljer i konsolen.

Styra händelsepropagering

När en händelse inträffar, bubblar den som standard uppåt (propagerar till föräldraelement). För att förhindra detta, använd event.stopPropagation(). Du kan också använda preventDefault() för att förhindra webbläsarens standardbeteende.

 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}

Den här koden inaktiverar standardåtgärden när knappen klickas, stoppar händelsebubblingen och utför anpassad bearbetning.

Sammanfattning

Händelsehantering i TypeScript är i grunden densamma som i JavaScript, men med korrekta typdefinitioner kan du arbeta med händelseobjekt och DOM-element på ett säkert och tillförlitligt sätt. Genom att lägga till och ta bort händelselyssnare, använda händelsetyper och typassertioner kan du uppnå tydligare och mindre felbenägen händelsehantering.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Shadow DOM i TypeScript Hämta/XMLHttpRequest i TypeScript