Manipulação de Eventos em TypeScript

Articles

Este artigo explica a manipulação de eventos em TypeScript.

Você pode aprender sobre métodos de manipulação de eventos e eventos personalizados através de exemplos de código.

YouTube Video

Manipulação de Eventos em TypeScript

O tratamento de eventos em TypeScript é feito da mesma forma que em JavaScript. No entanto, o TypeScript melhora a segurança de tipos, permitindo lidar com eventos de forma mais segura usando os tipos de eventos apropriados. O básico da manipulação de eventos envolve adicionar ouvintes de eventos aos elementos DOM e executar ações em resposta às operações do usuário.

Adicionando Ouvintes de Eventos

Ouvintes de eventos são adicionados aos elementos DOM usando o método addEventListener. Por exemplo, para tratar um evento de clique, você faria o seguinte:.

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

Neste código, addEventListener é usado para registrar um manipulador para o evento de clique no elemento DOM especificado.

Tipos de Eventos em TypeScript

Em TypeScript, o objeto event recebido no ouvinte de eventos recebe automaticamente o tipo apropriado. O objeto event possui diferentes propriedades dependendo do tipo de evento, mas seu tipo base é Event.

Usando o tipo apropriado para cada evento, você pode aproveitar a segurança de tipos do TypeScript em seu desenvolvimento.

Principais Tipos de Eventos

Event Event é o tipo base para eventos comuns. Usado para situações como envio de formulários ou conclusão de carregamento de 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 o evento de envio do formulário, impede a ação padrão de envio e exibe uma mensagem no console em vez disso.

MouseEvent

MouseEvent é um tipo de evento relacionado a ações do mouse, como cliques e movimento do mouse. Você pode obter informações sobre as coordenadas do mouse e qual botão foi clicado.

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 obtém as coordenadas do mouse quando o botão é clicado e as exibe no console.

KeyboardEvent KeyboardEvent é um tipo de evento relacionado à entrada do teclado. Você pode acessar a tecla pressionada e o estado de 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 exibe o nome da tecla pressionada e, se a tecla Ctrl estiver pressionada, também mostra essa informação no console.

InputEvent InputEvent é um tipo de evento relacionado a alterações em campos de entrada. É usado quando o valor de um campo de texto ou textarea é alterado.

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 exibe o conteúdo do campo de entrada no console sempre que seu valor muda.

FocusEvent FocusEvent é um tipo de evento que ocorre quando um elemento ganha ou perde o foco.

 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 exibe "Focused" no console quando o campo de entrada recebe foco e "Blurred" quando perde o foco.

Tratando Eventos Personalizados com Asserção de Tipo

Para eventos personalizados ou quando a inferência de tipo do TypeScript não funcionar, você pode especificar explicitamente o tipo usando asserção de tipo.

Por exemplo, para tratar um evento de um campo de entrada específico (HTMLInputElement), especifique o tipo da seguinte forma:.

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 asserção de tipo para tratar o alvo do evento como um HTMLInputElement e exibe seu valor no console.

Removendo Ouvintes de Eventos

Você pode remover ouvintes de eventos usando removeEventListener. Para isso, é necessário passar o mesmo manipulador de evento que foi adicionado 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 adiciona um ouvinte de evento de clique ao botão e depois o remove especificando o mesmo manipulador.

Criando Eventos Personalizados

Em TypeScript, além dos eventos padrão, você também pode criar e disparar eventos personalizados. Use a classe CustomEvent para criar um evento personalizado e dispará-lo com o 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 cria um evento personalizado usando CustomEvent, o despacha para o elemento e exibe seus detalhes no console.

Controlando a Propagação de Eventos

Quando um evento ocorre, por padrão ele é propagado (para elementos pai). Para evitar isso, use event.stopPropagation(). Você também pode usar preventDefault() para impedir o comportamento padrão do 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 desativa a ação padrão quando o botão é clicado, impede o bubble do evento e executa um processamento personalizado.

Resumo

O tratamento de eventos em TypeScript é basicamente o mesmo que em JavaScript, mas com definições de tipos adequadas, você pode trabalhar com objetos de evento e elementos DOM de forma mais segura e confiável. Ao adicionar e remover ouvintes de eventos, aplicar tipos de eventos e usar asserções de tipo, você pode obter um tratamento de eventos mais claro e com menos propensão a erros.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Shadow DOM em TypeScript Fetch/XMLHttpRequest em TypeScript