O que são Eventos

O JavaScript permite a criação de páginas dinâmicas. Eventos são ações que o JavaScript pode detectar. Cada elemento em uma página pode gerar eventos que disparam funções JavaScript, como um clique em um botão acionando um evento onclick. Esses eventos são definidos dentro do HTML.

Vinculando Eventos a Elementos

Método Padrão (via Listener)

Para navegadores modernos (IE9+ e outros):

elemento.addEventListener('click', function(evento) {
    // código a ser executado
});

Para Internet Explorer 8 e anteriores:

elemento.attachEvent('onclick', function() {
    // código a ser executado
});

Atribuindo como Propriedade do Elemento

elemento.onclick = function() {
    // código a ser executado
};

Definindo no Atributo HTML

<button onclick="minhaFuncao()">Clique</button>

Removendo Vinculação de Eventos

Eventos Vinculados via Listener

Para navegadores modernos:

elemento.removeEventListener('click', manipulador);

Para IE8-:

elemento.detachEvent('onclick', manipulador);

Para Outros Métodos de Vinculação

Substitua o manipulador por uma função vazia:

elemento.onclick = function() {};

O Papel de this em Eventos

Ao vincular eventos a múltiplos elementos, this se refere ao elemento que acionou o evento. Quando usado em um atributo HTML como <button onclick="tratarClique(this)">, this aponta para o botão específico.

Lista de Eventos Comuns

Eventos de Mouse

• click: Clique esquerdo único.
• dblclick: Clique esquerdo duplo.
• contextmenu: Clique com o botão direito.
• mouseover: O mouse entra no elemento.
• mouseout: O mouse sai do elmeento.
• mousedown: Botão do mouse pressionado.
• mouseup: Botão do mouse liberado.
• mousemove: Movimento do mouse.

Eventos de Teclado

• keydown: Tecla pressionada.
• keyup: Tecla liberada.
• keypress: Tecla pressionada (apenas caracteres; ignora teclas como Ctrl, Shift ou setas).

Eventos de Docmuento

• load: Carregamento completo do documento.
• unload: Fechamento do documento.
• beforeunload: Antes do fechamento (melhor compatibilidade).

Eventos de Formulário

• submit: Envio do formulário (vinculado ao elemanto form).
• reset: Redefinição do formulário (vinculado ao elemento form).
• blur: Elemento perde o foco.
• focus: Elemento ganha foco.
• change: Conteúdo alterado em input (requer alteração e perda de foco), radio, checkbox ou select.
• select: Texto selecionado em input ou textarea.

Eventos de Imagem

• abort: Carregamento da imagem interrompido.
• load: Imagem carregada com sucesso.
• error: Erro no carregamento da imagem.

Outros Eventos

• scroll: Rolagem do conteúdo em um elemento com barra de rolagem.
• resize: Alteração no tamanho da janela (vinculado a window).

Objeto de Evento

Categorias

Exemplos incluem Event, MouseEvent, KeyboardEvent e FocusEvent.

Propriedades

• clientX e clientY: Coordenadas do mouse.
• button: Identifica o botão do mouse (0 = esquerdo, 1 = scroll, 2 = direito).
• keyCode: Valor da tecla pressionada.
• cancelBubble: Define como true para impedir a propagação do evento.
• target: Elemento que acionou o evento.
• type: Tipo do evento.
• timeStamp: Momento em que o evento ocorreu.
• altKey, ctrlKey, shiftKey: Indicam se essas teclas estavam pressionadas.

Métodos

• stopPropagation(): Impede a propagação do evento.
• preventDefault(): Cancela a ação padrão do evento.