Introdução ao Tratamento de Eventos - JavaScript

Para interagir com o usuário em JavaScript, existem eventos. Por exemplo, quando um usuário clica em um botão, um evento de clique é disparado. De maneira similar, quando um usuário digita em um campo de texto, um evento correspondente é disparado. No código JavaScript, podemos detectar esses eventos e processá-los de alguma forma.

O processo funciona da seguinte maneira: um evento ocorre, como um usuário clicando em um botão. O objeto que disparou o evento é chamado de emissor. Após a ocorrência do evento, ele é colocado na fila de eventos (event queue), garantindo que os eventos disparados primeiro sejam também processados primeiro. O ciclo de eventos (event loop) verifica constantemente se há novos eventos na fila e, caso haja, o evento é encaminhado para os manipuladores de eventos (event handler). No JavaScript, esses manipuladores são funções simples que permitem responder ao evento ocorrido. Esse método também é conhecido como programação orientada a eventos (event-driven programming).

Se não houver manipuladores definidos para um evento, a ação padrão definida pelo navegador é executada.

No JavaScript, existem os seguintes tipos de eventos:

Eventos do mouse (movimento do cursor, cliques, etc.)
Eventos do teclado (pressionamento ou liberação de teclas)
Eventos do ciclo de vida dos elementos (como o evento de carregamento de uma página web)
Eventos de elementos de formulário (clique em um botão de um formulário, seleção de um item em uma lista suspensa, etc.)
Eventos que ocorrem ao modificar elementos do DOM
Eventos de toque em telas sensíveis ao toque
Eventos que ocorrem em caso de erros

É importante ressaltar que o uso de eventos não está limitado apenas à interface gráfica, embora a interface gráfica seja o domínio mais evidente de sua aplicação.

Vamos considerar o tratamento mais simples de eventos. Por exemplo, em uma página web temos o seguinte elemento div:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
    <div id="rect" onclick="console.log('Clicked!')" style="width:50px;height:50px;background-color:blue;"></div>
</body>
</html>

Este bloco div possui um atributo onclick que define um manipulador para o evento de clique no div. Ou seja, para tratar qualquer evento, precisamos definir um manipulador para ele. Neste caso, o manipulador apenas imprime uma linha no console:

console.log('Clicked!')

E ao clicar no bloco, poderemos ver a mensagem correspondente na console do navegador:

Eventos Básicos

A seguir, temos uma lista de eventos básicos:

Eventos do Mouse:

Objeto do evento: MouseEvent

click: Ocorre ao clicar com o ponteiro do mouse em um elemento.
dblclick: Ocorre ao clicar duas vezes rapidamente com o ponteiro do mouse em um elemento.
contextmenu: Ocorre ao abrir o menu de contexto (com o botão direito do mouse).
mousedown: Ocorre quando o ponteiro do mouse está sobre um elemento e o botão do mouse é pressionado.
mouseup: Ocorre quando o botão do mouse é solto enquanto o ponteiro está sobre um elemento.
mousemove: Ocorre ao mover o ponteiro do mouse sobre um elemento. Objeto do evento: MouseEvent.
mouseover: Ocorre quando o ponteiro entra nos limites de um elemento. Objeto do evento: MouseEvent.
mouseout: Ocorre quando o ponteiro sai dos limites de um elemento. Objeto do evento: MouseEvent.
mouseenter: Semelhante ao mouseover, mas este evento não se propaga(o que será explicado posteriormente).
mouseleave: Semelhante ao mouseout, mas este evento não se propaga(o que será explicado posteriormente).

Eventos de Elementos de Formulário:

Objeto do evento: Event

input: Ocorre ao alterar o texto em elementos <input> e <textarea> ou em elementos com atributo contenteditable.
change: Ocorre ao alterar o valor em listas, checkboxes ou radiobuttons.
submit: Ocorre ao enviar um formulário.
reset: Ocorre ao resetar um formulário através de um botão de reset.

Eventos de Foco:

Objeto do evento: FocusEvent

focus: Ocorre quando um elemento recebe o foco.
blur: Ocorre quando um elemento perde o foco.
focusin: Semelhante ao focus, mas este evento se propaga.
focusout:Semelhante ao blur, mas este evento se propaga.

Eventos de Interface Comum:

Objeto do evento: UIEvent

load: Ocorre ao carregar a página web.
unload: Ocorre ao descarregar a página web.
abort: Ocorre ao cancelar o carregamento de um recurso.
error: Ocorre ao haver um erro durante o carregamento da página.
select: Ocorre ao selecionar texto na página.
resize: Ocorre ao alterar as dimensões da janela do navegador.
scroll: Ocorre ao rolar a página.
DOMContentLoaded: Ocorre quando o DOM está totalmente carregado.

Objeto do evento: BeforeUnloadEvent

beforeunload: Ocorre imediatamente antes da página ser descarregada.

Eventos de Dispositivos Móveis e Outros Dispositivos com Tela Sensível ao Toque:

Objeto do evento: TouchEvent

touchstart: Ocorre ao tocar na tela.
touchend: Ocorre quando um toque na tela termina.
touchmove: Ocorre ao mover um dedo na tela sensível ao toque.
touchcancel: Ocorre quando um toque é interrompido.

Objeto do evento: DeviceOrientationEvent

deviceorientation: Ocorre quando há novos dados sobre a orientação do dispositivo.
devicemotion: Ocorre em intervalos regulares e indica a intensidade da aceleração que afeta o dispositivo.

Objeto do evento: Event

orientationchange: Ocorre ao alterar a orientação do dispositivo.

É importante ressaltar que a lista de eventos não é exaustiva e existem muitos outros eventos disponíveis.