Introdução aos Eventos em 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
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.