Gebeurtenisafhandeling in TypeScript

Articles

Dit artikel legt gebeurtenisafhandeling in TypeScript uit.

Je kunt leren over methoden voor gebeurtenisafhandeling en aangepaste gebeurtenissen aan de hand van codevoorbeelden.

YouTube Video

Gebeurtenisafhandeling in TypeScript

Gebeurtenisafhandeling in TypeScript gebeurt op dezelfde manier als in JavaScript. TypeScript biedt echter verbeterde typeveiligheid, waardoor je gebeurtenissen veilig kunt afhandelen door de juiste event types te gebruiken. De basis van gebeurtenisafhandeling is het toevoegen van event listeners aan DOM-elementen en het uitvoeren van acties naar aanleiding van gebruikersacties.

Event listeners toevoegen

Event listeners worden aan DOM-elementen toegevoegd met de methode addEventListener. Om bijvoorbeeld een klik-gebeurtenis af te handelen, doe je het volgende:.

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

In deze code wordt addEventListener gebruikt om een handler te registreren voor het klikgebeurtenis op het opgegeven DOM-element.

Gebeurtenistypen in TypeScript

In TypeScript krijgt het event-object dat in de event listener wordt ontvangen automatisch het juiste type toegewezen. Het event-object heeft verschillende eigenschappen afhankelijk van het type gebeurtenis, maar het basistype is Event.

Door het juiste type te gebruiken voor elke gebeurtenis, kun je profiteren van de typeveiligheid van TypeScript tijdens je ontwikkeling.

Belangrijkste gebeurtenistypen

Event Event is het basistype voor gewone gebeurtenissen. Wordt gebruikt voor bijvoorbeeld het verzenden van formulieren of het voltooien van het laden van een pagina.

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}

Deze code detecteert het submit-gebeurtenis van het formulier, voorkomt de standaard submit-actie en geeft in plaats daarvan een bericht weer in de console.

MouseEvent

MouseEvent is een gebeurtenistype dat betrekking heeft op muisacties zoals klikken en muisbewegingen. Je kunt informatie krijgen over de muiscoördinaten en welke knop is aangeklikt.

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}

Deze code haalt de muiscoördinaten op wanneer op de knop wordt geklikt en toont deze in de console.

KeyboardEvent KeyboardEvent is een gebeurtenistype dat betrekking heeft op invoer via het toetsenbord. Je hebt toegang tot de ingedrukte toets en de status van modificatietoetsen (Shift, Alt, Ctrl, enz.).

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});

Deze code toont de naam van de ingedrukte toets en, als de Ctrl-toets wordt ingedrukt, wordt die informatie ook naar de console geschreven.

InputEvent InputEvent is een gebeurtenistype dat betrekking heeft op wijzigingen in invoervelden. Het wordt gebruikt wanneer de waarde van een tekstveld of textarea is gewijzigd.

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}

Deze code toont de inhoud van het invoerveld in de console telkens wanneer de waarde verandert.

FocusEvent FocusEvent is een gebeurtenistype dat optreedt wanneer een element focus krijgt of verliest.

 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}

Deze code toont "Gefocust" in de console wanneer het invoerveld de focus krijgt, en "Vervagen" wanneer de focus verloren gaat.

Aangepaste gebeurtenissen afhandelen met type specificatie

Voor aangepaste gebeurtenissen of wanneer TypeScript's type-inferentie niet werkt, kun je het type expliciet aangeven met een typespecificatie.

Om bijvoorbeeld een gebeurtenis op een specifiek invoerveld (HTMLInputElement) af te handelen, specificeer je het type als volgt:.

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}

Deze code gebruikt type-assertie om het event-doel als een HTMLInputElement te behandelen en toont de waarde daarvan in de console.

Event listeners verwijderen

Je kunt event listeners verwijderen met removeEventListener. Hiervoor moet je dezelfde event handler opgeven als die oorspronkelijk is toegevoegd.

 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}

Deze code voegt een klikgebeurtenislistener toe aan de knop en verwijdert die vervolgens door dezelfde handler te specificeren.

Aangepaste gebeurtenissen maken

In TypeScript kun je naast standaardgebeurtenissen ook aangepaste gebeurtenissen maken en verzenden. Gebruik de CustomEvent-klasse om een aangepaste gebeurtenis te maken en deze te triggeren met de methode dispatchEvent.

 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}

Deze code maakt een aangepaste gebeurtenis met CustomEvent, verstuurt die naar het element en toont de details ervan in de console.

Gebeurtenispropagatie regelen

Wanneer een gebeurtenis plaatsvindt, bubbelt deze standaard (propageert naar bovenliggende elementen). Om dit te voorkomen, gebruik je event.stopPropagation(). Je kunt ook preventDefault() gebruiken om het standaardgedrag van de browser te voorkomen.

 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}

Deze code schakelt de standaardactie uit wanneer op de knop wordt geklikt, stopt de event-bubbling en voert aangepaste verwerking uit.

Samenvatting

Gebeurtenisafhandeling in TypeScript is in feite hetzelfde als in JavaScript, maar met de juiste typedefinities kun je veilig en betrouwbaar werken met event-objecten en DOM-elementen. Door event listeners toe te voegen of te verwijderen, gebeurtenistypen te gebruiken en typeaanduidingen toe te passen, kun je duidelijkere en minder foutgevoelige gebeurtenisafhandeling realiseren.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Shadow DOM in TypeScript Fetch/XMLHttpRequest in TypeScript