Ereignisbehandlung in TypeScript

Articles

Dieser Artikel erklärt die Ereignisbehandlung in TypeScript.

Sie können durch Code-Beispiele mehr über Ereignismethoden und benutzerdefinierte Ereignisse lernen.

YouTube Video

Ereignisbehandlung in TypeScript

Die Ereignisbehandlung in TypeScript erfolgt auf dieselbe Weise wie in JavaScript. TypeScript verbessert jedoch die Typsicherheit, sodass Sie bei Verwendung geeigneter Ereignistypen sicher mit Events arbeiten können. Die Grundlagen der Ereignisbehandlung bestehen darin, Ereignis-Handler zu DOM-Elementen hinzuzufügen und auf Benutzeraktionen zu reagieren.

Ereignis-Listener hinzufügen

Ereignis-Listener werden DOM-Elementen mit der Methode addEventListener hinzugefügt. Um beispielsweise ein Klickereignis zu behandeln, würden Sie Folgendes tun:.

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

In diesem Code wird addEventListener verwendet, um einen Handler für das Klick-Ereignis auf dem angegebenen DOM-Element zu registrieren.

Ereignistypen in TypeScript

In TypeScript wird dem im Event-Handler empfangenen event-Objekt automatisch der entsprechende Typ zugewiesen. Das event-Objekt hat je nach Ereignistyp unterschiedliche Eigenschaften, aber sein Basistyp ist Event.

Wenn Sie für jedes Ereignis den entsprechenden Typ verwenden, können Sie die Typsicherheit von TypeScript in Ihrer Entwicklung nutzen.

Haupt-Ereignistypen

Event Event ist der Basistyp für gängige Ereignisse. Wird verwendet für Dinge wie Formularübermittlungen oder den Abschluss des Seitenladens.

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}

Dieser Code erkennt das Absenden-Event eines Formulars, verhindert die Standardabsendung und gibt stattdessen eine Nachricht in die Konsole aus.

MouseEvent

MouseEvent ist ein Ereignistyp, der sich auf Mausaktionen wie Klicks und Mausbewegungen bezieht. Sie können Informationen zu den Mauskoordinaten und zum geklickten Maus-Button erhalten.

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}

Dieser Code erhält die Mauskoordinaten beim Klick auf den Button und zeigt sie in der Konsole an.

KeyboardEvent KeyboardEvent ist ein Ereignistyp, der sich auf Tastatureingaben bezieht. Sie können auf die gedrückte Taste und den Zustand von Modifikatortasten (Umschalt, Alt, Strg usw.) zugreifen.

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

Dieser Code zeigt den Namen der gedrückten Taste an und gibt, falls die Ctrl-Taste gedrückt wird, diese Information ebenfalls an die Konsole aus.

InputEvent InputEvent ist ein Ereignistyp, der sich auf Änderungen in Eingabefeldern bezieht. Er wird verwendet, wenn sich der Wert eines Textfeldes oder einer Textarea geändert hat.

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}

Dieser Code zeigt den Inhalt des Eingabefeldes in der Konsole an, jedes Mal wenn sich der Wert ändert.

FocusEvent FocusEvent ist ein Ereignistyp, der auftritt, wenn ein Element den Fokus erhält oder verliert.

 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}

Dieser Code zeigt in der Konsole "Focused", wenn das Eingabefeld den Fokus erhält, und "Blurred", wenn es den Fokus verliert.

Benutzerdefinierte Ereignisse mit Typüberprüfung behandeln

Für benutzerdefinierte Ereignisse oder wenn die Typinferenz von TypeScript nicht funktioniert, können Sie den Typ explizit mit einer Typüberprüfung angeben.

Um beispielsweise ein Ereignis für ein bestimmtes Eingabefeld (HTMLInputElement) zu behandeln, geben Sie den Typ wie folgt an:.

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}

Dieser Code verwendet Ty-Assertion, um das Event-Target als HTMLInputElement zu behandeln, und zeigt seinen Wert in der Konsole an.

Event-Listener entfernen

Sie können Ereignis-Listener mit removeEventListener entfernen. Dazu müssen Sie denselben Event-Handler übergeben, der ursprünglich hinzugefügt wurde.

 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}

Dieser Code fügt dem Button einen Klick-Eventlistener hinzu und entfernt ihn anschließend, indem derselbe Handler angegeben wird.

Benutzerdefinierte Ereignisse erstellen

In TypeScript können Sie zusätzlich zu Standardereignissen auch benutzerdefinierte Ereignisse erstellen und auslösen. Verwenden Sie die Klasse CustomEvent, um ein benutzerdefiniertes Ereignis zu erstellen, und lösen Sie es mit der Methode dispatchEvent aus.

 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}

Dieser Code erstellt ein benutzerdefiniertes Ereignis mit CustomEvent, feuert es an das Element aus und zeigt seine Details in der Konsole an.

Steuern der Ereignisweiterleitung

Wenn ein Ereignis auftritt, wird es standardmäßig weitergeleitet (es wandert zu den übergeordneten Elementen). Um dies zu verhindern, verwenden Sie event.stopPropagation(). Sie können auch preventDefault() verwenden, um das Standardverhalten des Browsers zu verhindern.

 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}

Dieser Code deaktiviert die Standardaktion beim Klicken auf den Button, stoppt das Ereignisbubbling und führt benutzerdefinierte Verarbeitungen aus.

Zusammenfassung

Die Ereignisbehandlung in TypeScript ist grundsätzlich dieselbe wie in JavaScript, aber mit geeigneten Typdefinitionen können Sie sicher und zuverlässig mit Ereignisobjekten und DOM-Elementen arbeiten. Durch das Hinzufügen und Entfernen von Ereignis-Listenern, die Anwendung von Ereignistypen und die Verwendung von Typüberprüfungen erreichen Sie eine klarere und weniger fehleranfällige Ereignisbehandlung.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Shadow DOM in TypeScript Fetch/XMLHttpRequest in TypeScript