Manejo de eventos en TypeScript

Articles

Este artículo explica el manejo de eventos en TypeScript.

Puede aprender sobre métodos de manejo de eventos y eventos personalizados mediante ejemplos de código.

YouTube Video

Manejo de eventos en TypeScript

La gestión de eventos en TypeScript se realiza de la misma manera que en JavaScript. Sin embargo, TypeScript mejora la seguridad de tipos, lo que te permite manejar los eventos de manera segura usando los tipos de eventos apropiados. La base del manejo de eventos consiste en agregar escuchadores de eventos a los elementos del DOM y ejecutar acciones en respuesta a las operaciones del usuario.

Agregando escuchadores de eventos

Los escuchadores de eventos se agregan a los elementos del DOM utilizando el método addEventListener. Por ejemplo, para manejar un evento de clic, harías lo siguiente:.

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

En este código, se utiliza addEventListener para registrar un manejador para el evento de clic en el elemento DOM especificado.

Tipos de eventos en TypeScript

En TypeScript, el objeto event recibido en el escuchador de eventos recibe automáticamente el tipo apropiado. El objeto event tiene diferentes propiedades según el tipo de evento, pero su tipo base es Event.

Al usar el tipo apropiado para cada evento, puedes aprovechar la seguridad de tipos de TypeScript en tu desarrollo.

Principales tipos de eventos

Event Event es el tipo base para eventos comunes. Se utiliza para cosas como el envío de formularios o la finalización de la carga de la página.

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}

Este código detecta el evento de envío del formulario, previene la acción predeterminada de envío y muestra un mensaje en la consola en su lugar.

MouseEvent

MouseEvent es un tipo de evento relacionado con acciones del ratón como clics y movimientos. Puedes obtener información sobre las coordenadas del ratón y qué botón fue presionado.

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}

Este código obtiene las coordenadas del ratón cuando se hace clic en el botón y las muestra en la consola.

KeyboardEvent KeyboardEvent es un tipo de evento relacionado con la entrada del teclado. Puedes acceder a la tecla presionada y al estado de las teclas modificadoras (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});

Este código muestra el nombre de la tecla pulsada y, si la tecla Ctrl está presionada, también muestra esa información en la consola.

InputEvent InputEvent es un tipo de evento relacionado con los cambios en los campos de entrada. Se utiliza cuando el valor de un campo de texto o textarea ha cambiado.

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}

Este código muestra el contenido del campo de entrada en la consola cada vez que su valor cambia.

FocusEvent FocusEvent es un tipo de evento que ocurre cuando un elemento gana o pierde el enfoque.

 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}

Este código muestra "Enfocado" en la consola cuando el campo de entrada tiene el foco y "Desenfocado" cuando lo pierde.

Manejo de eventos personalizados con aserción de tipo

Para eventos personalizados o cuando la inferencia de tipos de TypeScript no funciona, puedes especificar explícitamente el tipo usando aserciones de tipo.

Por ejemplo, para manejar un evento de un campo de entrada específico (HTMLInputElement), especifica el tipo de la siguiente manera:.

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}

Este código usa una aserción de tipo para tratar el objetivo del evento como un HTMLInputElement y muestra su valor en la consola.

Eliminar escuchadores de eventos

Puedes eliminar escuchadores de eventos usando removeEventListener. Para esto, necesitas pasar el mismo manejador de eventos que se agregó inicialmente.

 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}

Este código añade un escuchador de evento de clic al botón y luego lo elimina especificando el mismo manejador.

Crear eventos personalizados

En TypeScript, además de los eventos estándar, también puedes crear y despachar eventos personalizados. Utiliza la clase CustomEvent para crear un evento personalizado y desencadenarlo con el método 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}

Este código crea un evento personalizado usando CustomEvent, lo envía al elemento y muestra sus detalles en la consola.

Controlando la propagación de eventos

Cuando ocurre un evento, por defecto este burbujea (se propaga a los elementos padres). Para evitarlo, usa event.stopPropagation(). También puedes usar preventDefault() para evitar el comportamiento predeterminado del navegador.

 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}

Este código desactiva la acción predeterminada cuando se hace clic en el botón, detiene la propagación del evento y ejecuta un procesamiento personalizado.

Resumen

El manejo de eventos en TypeScript es básicamente igual que en JavaScript, pero con definiciones de tipo adecuadas, puedes trabajar de manera segura y confiable con objetos de eventos y elementos del DOM. Al agregar y eliminar escuchadores de eventos, aplicar tipos de eventos y usar aserciones de tipo, puedes lograr un manejo de eventos más claro y con menos errores.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Shadow DOM en TypeScript Fetch/XMLHttpRequest en TypeScript