Obsługa zdarzeń w TypeScript

Articles

Ten artykuł wyjaśnia obsługę zdarzeń w TypeScript.

Możesz poznać metody obsługi zdarzeń oraz zdarzenia niestandardowe na przykładach kodu.

YouTube Video

Obsługa zdarzeń w TypeScript

Obsługa zdarzeń w TypeScript odbywa się w taki sam sposób jak w JavaScript. Jednak TypeScript zwiększa bezpieczeństwo typów, umożliwiając bezpieczną obsługę zdarzeń dzięki użyciu odpowiednich typów zdarzeń. Podstawą obsługi zdarzeń jest dodawanie nasłuchiwaczy zdarzeń do elementów DOM i wykonywanie akcji w odpowiedzi na operacje użytkownika.

Dodawanie nasłuchiwaczy zdarzeń

Nasłuchiwacze zdarzeń dodaje się do elementów DOM za pomocą metody addEventListener. Na przykład, aby obsłużyć zdarzenie kliknięcia, wykonaj następujące czynności:.

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

addEventListener jest używane w tym kodzie do zarejestrowania obsługi kliknięcia na określonym elemencie DOM.

Typy zdarzeń w TypeScript

W TypeScript obiekt event otrzymany w nasłuchiwaczu jest automatycznie przypisywany do odpowiedniego typu. Obiekt event posiada różne właściwości w zależności od typu zdarzenia, ale jego podstawowym typem jest Event.

Korzystając z odpowiedniego typu dla każdego zdarzenia, możesz wykorzystać bezpieczeństwo typów TypeScript w swoim kodzie.

Główne typy zdarzeń

Event Event to podstawowy typ dla zwykłych zdarzeń. Używany m.in. do przesyłania formularzy lub zakończenia ładowania strony.

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}

Ten kod wykrywa zdarzenie wysłania formularza, zapobiega domyślnej akcji wysyłki i zamiast tego wyświetla komunikat w konsoli.

MouseEvent

MouseEvent to typ zdarzenia związany z działaniami myszy, takimi jak kliknięcia i ruchy myszą. Możesz uzyskać informacje o współrzędnych myszy i o tym, który przycisk został kliknięty.

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}

Ten kod pobiera współrzędne myszy po kliknięciu przycisku i wyświetla je w konsoli.

KeyboardEvent KeyboardEvent to typ zdarzenia związany z wejściem z klawiatury. Możesz uzyskać dostęp do naciśniętego klawisza i stanu klawiszy modyfikujących (Shift, Alt, Ctrl itp.).

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

Ten kod wyświetla nazwę naciśniętego klawisza, a jeśli przytrzymany jest klawisz Ctrl, również przekazuje tę informację do konsoli.

InputEvent InputEvent to typ zdarzenia związany ze zmianami w polach formularza. Używany, gdy zmienia się wartość pola tekstowego lub textarea.

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}

Ten kod wyświetla zawartość pola wejściowego w konsoli za każdym razem, gdy jego wartość się zmienia.

FocusEvent FocusEvent to typ zdarzenia, które występuje, gdy element zyskuje lub traci 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}

Ten kod wyświetla "Skupione" w konsoli, gdy pole wejściowe jest aktywne, a "Nieskupione" gdy traci fokus.

Obsługa niestandardowych zdarzeń za pomocą asercji typów

Dla niestandardowych zdarzeń lub gdy wnioskowanie typu TypeScript nie działa, możesz jawnie określić typ przy użyciu asercji typu.

Na przykład, aby obsłużyć zdarzenie dla konkretnego pola wejściowego (HTMLInputElement), określ typ w następujący sposób:.

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}

Ten kod używa asercji typu, aby potraktować cel zdarzenia jako HTMLInputElement i wyświetlić jego wartość w konsoli.

Usuwanie nasłuchiwaczy zdarzeń

Możesz usuwać nasłuchiwacze zdarzeń przy pomocy removeEventListener. Aby to zrobić, należy przekazać ten sam handler zdarzenia, który został dodany wcześniej.

 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}

Ten kod dodaje nasłuchiwanie zdarzenia kliknięcia do przycisku, a następnie usuwa je, wskazując ten sam handler.

Tworzenie niestandardowych zdarzeń

W TypeScript oprócz standardowych zdarzeń możesz także tworzyć i wywoływać zdarzenia niestandardowe. Użyj klasy CustomEvent, aby utworzyć niestandardowe zdarzenie i wywołać je za pomocą metody 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}

Ten kod tworzy niestandardowe zdarzenie za pomocą CustomEvent, wysyła je do elementu i wyświetla jego szczegóły w konsoli.

Kontrola propagacji zdarzeń

Gdy wystąpi zdarzenie, domyślnie jest ono propagowane do elementów nadrzędnych (bubbling). Aby temu zapobiec, użyj event.stopPropagation(). Możesz również użyć preventDefault(), aby zapobiec domyślnemu działaniu przeglądarki.

 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}

Ten kod wyłącza domyślną akcję po kliknięciu przycisku, zatrzymuje propagację zdarzeń i wykonuje własne operacje.

Podsumowanie

Obsługa zdarzeń w TypeScript jest zasadniczo taka sama jak w JavaScript, ale dzięki poprawnym definicjom typów możesz bezpiecznie i niezawodnie pracować z obiektami zdarzeń i elementami DOM. Dodając i usuwając nasłuchiwacze zdarzeń, stosując typy zdarzeń oraz używając asercji typów, możesz osiągnąć bardziej czytelną i mniej podatną na błędy obsługę zdarzeń.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Shadow DOM w TypeScript Pobierz/XMLHttpRequest w TypeScript