Gestione degli eventi in TypeScript

Articles

Questo articolo spiega la gestione degli eventi in TypeScript.

Puoi imparare i metodi di gestione degli eventi e gli eventi personalizzati tramite esempi di codice.

YouTube Video

Gestione degli eventi in TypeScript

La gestione degli eventi in TypeScript avviene nello stesso modo che in JavaScript. Tuttavia, TypeScript migliora la sicurezza dei tipi, consentendoti di gestire gli eventi in modo sicuro utilizzando tipi di eventi appropriati. Le basi della gestione degli eventi prevedono l’aggiunta di event listener agli elementi DOM ed esecuzione di azioni in risposta alle operazioni dell’utente.

Aggiunta di event listener

I listener degli eventi vengono aggiunti agli elementi DOM utilizzando il metodo addEventListener. Ad esempio, per gestire un evento click, devi procedere come segue:.

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

In questo codice, addEventListener viene utilizzato per registrare un gestore per l'evento di click sull'elemento DOM specificato.

Tipi di eventi in TypeScript

In TypeScript, l’oggetto event ricevuto nell’event listener viene automaticamente associato al tipo appropriato. L’oggetto event ha proprietà diverse a seconda del tipo di evento, ma il suo tipo base è Event.

Utilizzando il tipo appropriato per ogni evento, puoi sfruttare la sicurezza dei tipi di TypeScript nello sviluppo.

Tipi di eventi principali

Event Event è il tipo di base per gli eventi comuni. Utilizzato ad esempio per la trasmissione di form o il completamento del caricamento di una 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}

Questo codice rileva l'evento di invio del modulo, impedisce l'azione predefinita di invio e invece mostra un messaggio nella console.

MouseEvent

MouseEvent è un tipo di evento legato alle azioni del mouse, come i clic e il movimento del mouse. Puoi ottenere informazioni sulle coordinate del mouse e su quale pulsante è stato cliccato.

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}

Questo codice ottiene le coordinate del mouse quando si fa clic sul pulsante e le mostra nella console.

KeyboardEvent KeyboardEvent è un tipo di evento relativo all'input da tastiera. Puoi accedere al tasto premuto e allo stato dei tasti modificatori (Shift, Alt, Ctrl, ecc.).

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

Questo codice mostra il nome del tasto premuto e, se il tasto Ctrl è tenuto premuto, visualizza anche quell'informazione nella console.

InputEvent InputEvent è un tipo di evento relativo alle modifiche nei campi di input. Viene utilizzato quando il valore di un campo di testo o di una textarea è stato modificato.

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}

Questo codice mostra il contenuto del campo di input nella console ogni volta che il suo valore cambia.

FocusEvent FocusEvent è un tipo di evento che si verifica quando un elemento acquisisce o perde il focus.

 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}

Questo codice mostra "Focused" nella console quando il campo di input riceve il focus, e "Blurred" quando perde il focus.

Gestione degli eventi personalizzati con asserzioni di tipo

Per eventi personalizzati o quando l’inferenza dei tipi di TypeScript non funziona, puoi specificare esplicitamente il tipo utilizzando le asserzioni di tipo.

Ad esempio, per gestire un evento per un campo di input specifico (HTMLInputElement), specifica il tipo come segue:.

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}

Questo codice utilizza l'asserzione di tipo per trattare il target dell'evento come un HTMLInputElement e mostra il suo valore nella console.

Rimozione degli event listener

Puoi rimuovere i listener degli eventi utilizzando removeEventListener. Per questo è necessario passare lo stesso gestore di eventi aggiunto in precedenza.

 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}

Questo codice aggiunge un listener per l'evento click al pulsante e poi lo rimuove specificando lo stesso handler.

Creazione di eventi personalizzati

In TypeScript, oltre agli eventi standard, puoi creare e lanciare eventi personalizzati. Utilizza la classe CustomEvent per creare un evento personalizzato e attivalo con il metodo 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}

Questo codice crea un evento personalizzato usando CustomEvent, lo invia all'elemento e mostra i suoi dettagli nella console.

Controllo della propagazione degli eventi

Quando si verifica un evento, per impostazione predefinita, esso si propaga (bubble) agli elementi genitori. Per impedire ciò, usa event.stopPropagation(). Puoi anche usare preventDefault() per impedire il comportamento predefinito del browser.

 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}

Questo codice disabilita l'azione predefinita quando si fa clic sul pulsante, interrompe la propagazione dell'evento ed esegue un'elaborazione personalizzata.

Riepilogo

La gestione degli eventi in TypeScript è fondamentalmente la stessa di JavaScript, ma con una corretta definizione dei tipi puoi lavorare in modo sicuro e affidabile con oggetti evento ed elementi DOM. Aggiungendo e rimuovendo event listener, applicando tipi di evento e utilizzando asserzioni di tipo, puoi ottenere una gestione degli eventi più chiara e meno soggetta a errori.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Shadow DOM in TypeScript Fetch/XMLHttpRequest in TypeScript