English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Os eventos DOM são enviados para notificar o código de eventos interessantes ocorrendo.
Os eventos são geralmente usados em conjunto com funcionalidades e não são executadas antes do evento ocorrer (por exemplo, quando o usuário clica em um botão).
O evento pode representar tudo, desde interações básicas do usuário até notificações automáticas de eventos ocorrendo no modelo de apresentação.
| Nome do evento | Descrição | Tipo de Evento |
|---|---|---|
| abort | Este evento ocorre quando a carga do recurso foi interrompida | UiEvent, Event |
| afterprint | Este evento ocorre quando o documento relacionado já começou a ser impresso ou a visualização de impressão foi encerrada | Event |
| animationend | Este evento ocorre quando a animação CSS é concluída | AnimationEvent |
| animationiteration | Este evento ocorre ao repetir a animação CSS | AnimationEvent |
| animationstart | Este evento ocorre quando a animação CSS começa | AnimationEvent |
| beforeprint | Ocorre este evento quando o documento relacionado está prestes a ser impresso ou visualizado para impressão | Event |
| beforeunload | Ocorre este evento quando a janela, o documento e seus recursos estão prestes a serem desmoldados | UiEvent, Event |
| blur | Ocorre este evento quando o elemento perde o foco (não bolha) | FocusEvent |
| canplay | Ocorre este evento quando o navegador pode começar a reproduzir a mídia (quando tiver suficiente buffer para começar a reprodução) | Event |
| canplaythrough | Ocorre este evento quando o navegador pode reproduzir a mídia sem parar a buffer | Event |
| change | Ocorre este evento quando o conteúdo do estado de seleção ou seleção de um elemento de formulário muda (para <input>, <select> e <textarea>) | Event |
| click | Ocorre um evento quando o usuário clica no elemento | MouseEvent |
| contextmenu | Ocorre este evento quando o usuário clica com o botão direito em algum elemento para abrir o menu de contexto | MouseEvent |
| copy | Ocorre este evento quando o usuário copia o conteúdo do elemento | ClipboardEvent |
| cut | Ocorre este evento quando o usuário corta o conteúdo do elemento | ClipboardEvent |
| dblclick | Ocorre um evento quando o usuário double-clique no elemento | MouseEvent |
| drag | Ocorre um evento durante a arrastar do elemento | DragEvent |
| dragend | Ocorre este evento quando o usuário termina de arrastar o elemento | DragEvent |
| dragenter | Ocorre um evento quando o elemento arrastado entra no destino de largada | DragEvent |
| dragleave | Ocorre um evento quando o elemento arrastado sai do destino de largada | DragEvent |
| dragover | Ocorre um evento quando o elemento arrastado está acima do destino de largada | DragEvent |
| dragstart | Ocorre este evento quando o usuário começa a arrastar o elemento | DragEvent |
| drop | Ocorre um evento quando o elemento arrastado é colocado no destino de largada | DragEvent |
| durationchange | Ocorre este evento quando a duração da mídia é alterada | Event |
| ended | Este evento ocorre quando a mídia é reproduzida até o final (útil para mensagens como 'Obrigado por ouvir') | Event |
| error | Ocorre quando a carga do recurso falha | ProgressEvent, UiEvent, Event |
| focus | Ocorre um evento quando o elemento já possui o foco (não bolha) | FocusEvent |
| focusin | Este evento ocorre quando algum elemento está prestes a ganhar o foco | FocusEvent |
| focusout | Este evento ocorre quando algum elemento está prestes a perder o foco | FocusEvent |
| fullscreenchange | Ocorre um evento ao exibir o elemento em modo de tela cheia | Event |
| fullscreenerror | Ocorre este evento quando o elemento não pode ser exibido em modo de tela cheia | Event |
| hashchange | Este evento ocorre quando a parte de âncora da URL muda | HashChangeEvent |
| input | Ocorre um evento quando o elemento recebe entrada do usuário | InputEvent, Event |
| invalid | Ocorre quando o elemento está inválido | Event |
| keydown | Este evento ocorre quando o usuário pressiona uma tecla | KeyboardEvent |
| keypress | Ocorre um evento quando o usuário pressiona uma tecla | KeyboardEvent |
| keyup | O evento ocorre quando o usuário solta uma tecla. | KeyboardEvent |
| load | O evento ocorre quando o objeto já foi carregado. | UiEvent, Event |
| loadeddata | O evento ocorre ao carregar dados de mídia. | Event |
| loadedmetadata | O evento ocorre ao carregar metadados (como dimensões e duração). | Event |
| loadstart | O evento ocorre quando o navegador começa a buscar o mídia especificado. | ProgressEvent |
| message | O evento ocorre ao receber uma mensagem da fonte do evento. | Event |
| mousedown | O evento ocorre quando o usuário pressiona o botão do mouse em um elemento. | MouseEvent |
| mouseenter | O evento ocorre quando o ponteiro move para um elemento. | MouseEvent |
| mouseleave | O evento ocorre quando o ponteiro sai de um elemento. | MouseEvent |
| mousemove | O evento ocorre quando o ponteiro move sobre um elemento. | MouseEvent |
| mouseover | O evento ocorre quando o ponteiro move para um elemento ou um de seus elementos filhos. | MouseEvent |
| mouseout | O evento ocorre quando o ponteiro do mouse sai de um elemento ou de um de seus elementos filhos. | MouseEvent |
| mouseup | O evento ocorre quando o usuário solta o botão do mouse em um elemento. | MouseEvent |
| mousewheel | Não recomendado.Use o evento wheel. | WheelEvent |
| offline | O evento ocorre quando o navegador começa a trabalhar offline. | Event |
| online | O evento ocorre quando o navegador começa a trabalhar online. | Event |
| open | O evento ocorre ao abrir a conexão com a fonte do evento. | Event |
| pagehide | O evento ocorre quando o usuário sai da navegação na página. | PageTransitionEvent |
| A página é exibida | O evento ocorre quando o usuário navega para a página da web. | PageTransitionEvent |
| paste | O evento ocorre quando o usuário cola algum conteúdo em um elemento. | ClipboardEvent |
| pause | O evento ocorre quando o usuário ou o código pausa o mídia. | Event |
| play | O evento ocorre quando o mídia começa ou deixou de pausar. | Event |
| playing | O evento ocorre ao reproduzir o mídia após pausar ou parar a bufferização. | Event |
| popstate | O evento ocorre quando a história da janela muda. | PopStateEvent |
| progress | O evento ocorre enquanto o navegador está obtendo dados de mídia (baixando mídia). | Event |
| ratechange | O evento ocorre ao alterar a velocidade de reprodução do mídia. | Event |
| resize | O evento ocorre ao ajustar o tamanho da visualização do documento. | UiEvent, Event |
| reset | O evento ocorre ao redefinir o formulário. | Event |
| scroll | O evento ocorre ao rolar a barra de rolagem de um elemento. | UiEvent, Event |
| search | O evento ocorre quando o usuário digita conteúdo no campo de pesquisa (para <input="search">). | Event |
| seeked | Quando o usuário completa o movimento/O evento ocorre ao saltar para uma nova posição no mídia. | Event |
| seeking | Quando o usuário começa a mover/O evento ocorre ao saltar para uma nova posição no mídia. | Event |
| select | O evento ocorre após o usuário selecionar algum texto (para <input> e <textarea>). | UiEvent, Event |
| show | Este evento ocorre quando o elemento <menu> é exibido como um menu de contexto | Event |
| stalled | Este evento ocorre quando o navegador tenta obter dados de mídia, mas os dados não estão disponíveis | Event |
| storage | Este evento ocorre ao atualizar a área de armazenamento da Web | StorageEvent |
| submit | Este evento ocorre quando o formulário é submetido | Event |
| suspend | Este evento ocorre quando o navegador decide não obter dados de mídia | Event |
| timeupdate | Este evento ocorre quando a posição de reprodução muda (por exemplo, quando o usuário avança rapidamente para outro ponto no mídia) | Event |
| toggle | Este evento ocorre quando o usuário abre ou fecha o elemento <details> | Event |
| touchcancel | Este evento ocorre quando o toque é interrompido | TouchEvent |
| touchend | Este evento ocorre quando o dedo é removido da tela do toque | TouchEvent |
| touchmove | Este evento ocorre quando o dedo é arrastado na tela | TouchEvent |
| touchstart | Este evento ocorre quando o dedo é colocado na tela do toque | TouchEvent |
| transitionend | Este evento ocorre quando a conversão CSS é concluída | TransitionEvent |
| unload | Este evento ocorre quando o documento ou recursos dependentes são desmontados | UiEvent, Event |
| volumechange | Este evento ocorre quando o volume do mídia é alterado (inclusive ao definir o volume como 'mudo') | Event |
| waiting | Este evento ocorre quando o mídia é pausado, mas está esperando para ser restaurado (por exemplo, quando o mídia é pausado para carregar mais dados) | Event |
| wheel | Este evento ocorre quando a roda do mouse é rolada para cima ou para baixo no elemento | WheelEvent |
A tabela a seguir lista os atributos do evento DOM:
| Atributos | Descrição | Tipo de Evento |
|---|---|---|
| altKey | Retorna se a tecla 'ALT' foi pressionada ao ativar o evento do mouse | MouseEvent |
| altKey | Retorna se a tecla 'ALT' foi pressionada ao ativar o evento de tecla | KeyboardEvent, TouchEvent |
| animationName | Retorna o nome da animação | AnimationEvent |
| bolhas | Retorna se o evento específico é um evento de bolha | Event |
| button | Retorna o botão do mouse pressionado ao desencadear o evento do mouse | MouseEvent |
| buttons | Retorna o botão do mouse pressionado ao desencadear o evento do mouse | MouseEvent |
| cancelável | Retorna se o evento pode ser cancelado para evitar sua operação padrão | Event |
| charCode | Retorna o código do caractere Unicode da tecla que ativou o evento onkeypress | KeyboardEvent |
| changeTouches | Retorna a lista de todos os objetos de toque cujo estado mudou entre o toque anterior e o toque atual | TouchEvent |
| clientX | Retorna a coordenada horizontal do ponteiro do mouse em relação à janela atual ao ativar o evento do mouse | MouseEvent, TouchEvent |
| clientY | Retorna a coordenada vertical do ponteiro do mouse em relação à janela atual ao ativar o evento do mouse | MouseEvent, TouchEvent |
| clipboardData | Retorna um objeto que contém os dados afetados pela operação na área de transferência | ClipboardData |
| código | Retorna o código da tecla que ativou o evento | KeyboardEvent |
| composto | Retorna se o evento é composto | Event |
| ctrlKey | Retorna se a tecla 'CTRL' foi pressionada ao ativar o evento do mouse | MouseEvent |
| ctrlKey | Retorna se o botão 'CTRL' foi pressionado ao ativar o evento de tecla | KeyboardEvent, TouchEvent |
| currentTarget | Retorna o elemento que desencadeou o evento de ouvinte de evento | Event |
| data | Retorna o caractere inserido | InputEvent |
| dataTransfer | Retorna um objeto que contém o que será arrastado e soltado/Dado inserido ou excluído | DragEvent, InputEvent |
| defaultPrevented | Retorna se o método preventDefault() foi chamado para o evento | Event |
| deltaX | Retorna a quantidade de rolagem horizontal do mouse rolo (eixo x) | WheelEvent |
| deltaY | Retorna a quantidade de rolagem vertical do mouse rolo (eixo y) | WheelEvent |
| deltaZ | Retorna a quantidade de rolagem do mouse rolo na Z-axi | WheelEvent |
| deltaMode | Retorna um número que representa a unidade de medida do valor de incremento (píxeis, linhas ou páginas) | WheelEvent |
| detail | Retorna um número que indica quantas vezes o mouse foi clicado | UiEvent |
| elapsedTime | Retorna os segundos transcorridos da animação | AnimationEvent |
| elapsedTime | Retorna os segundos transcorridos da transição | |
| eventPhase | Retorna qual fase do fluxo de eventos está sendo avaliada atualmente | Event |
| inputType | Retorna o tipo de alteração (ou seja, 'inserção' ou 'exclusão') | InputEvent |
| isComposing | Retorna se o estado do evento está sendo composto | InputEvent, KeyboardEvent |
| isTrusted | Retorna se o evento é confiável | Event |
| key | Retorna o valor do caractere da chave da tecla representada pelo evento | KeyboardEvent |
| key | Retorna a chave do item de armazenamento alterado | StorageEvent |
| keyCode | Retorna o código Unicode do caractere que desencadeou o evento onkeypress, ou o código de chave Unicode do caractere que desencadeou os eventos onkeydown ou onkeyup. | KeyboardEvent |
| location | Retorna a localização da tecla na tecla ou no dispositivo | KeyboardEvent |
| lengthComputable | Retorna se o comprimento do progresso pode ser calculado | ProgressEvent |
| loaded | Retorna a quantidade de trabalho carregado | ProgressEvent |
| metaKey | Retorna se o botão 'META' foi pressionado ao ativar o evento | MouseEvent |
| metaKey | Retorna se o botão 'meta' foi pressionado ao ativar o evento de tecla | KeyboardEvent, TouchEvent |
| MovementX | Retorna a coordenada horizontal do cursor do mouse em relação à posição da última evento mousemove | MouseEvent |
| MovementY | Retorna a coordenada vertical do cursor do mouse em relação à posição da última evento mousemove | MouseEvent |
| newValue | Retorna o novo valor do item de armazenamento alterado | StorageEvent |
| newURL | Retorna a URL do documento após a alteração do hash | HasChangeEvent |
| offsetX | Retorna a coordenada horizontal do cursor do mouse em relação à margem do elemento alvo | MouseEvent |
| offsetY | Retorna a coordenada vertical do cursor do mouse em relação à margem do elemento alvo | MouseEvent |
| oldValue | Retorna o valor antigo do item de armazenamento alterado | StorageEvent |
| oldURL | Retorna a URL do documento antes da alteração do hash | HasChangeEvent |
| onemptied | Este evento ocorre quando ocorre uma situação adversa e o arquivo de mídia fica inesperadamente indisponível (por exemplo, desconexão acidental) | |
| pageX | Retorna a coordenada horizontal do cursor do mouse em relação ao documento ao desencadear o evento do mouse | MouseEvent |
| pageY | Retorna a coordenada vertical do cursor do mouse em relação ao documento ao desencadear o evento do mouse | MouseEvent |
| persisted | Retorna se a página da web foi armazenada no cache do navegador | PageTransitionEvent |
| propertyName | Retorna o nome da propriedade CSS associada à animação ou transição | AnimationEvent, TransitionEvent |
| pseudoElement | Retorna o nome do pseudo-elemento da animação ou transição | AnimationEvent, TransitionEvent |
| region | MouseEvent | |
| relatedTarget | Retorna o elemento relacionado ao elemento que desencadeou o evento do mouse | MouseEvent |
| relatedTarget | Retorna o elemento relacionado ao elemento que desencadeou o evento | FocusEvent |
| repeat | Retorna se alguma tecla foi pressionada repetidamente | KeyboardEvent |
| screenX | Retorna a coordenada horizontal do cursor do mouse em relação à tela ao desencadear o evento | MouseEvent |
| screenY | Retorna a coordenada vertical do cursor do mouse em relação à tela ao desencadear o evento | MouseEvent |
| shiftKey | Retorna se a tecla 'SHIFT' foi pressionada ao desencadear o evento | MouseEvent |
| shiftKey | Retorna se a tecla 'SHIFT' foi pressionada ao desencadear o evento de tecla | KeyboardEvent, TouchEvent |
| state | Retorna um objeto que contém uma cópia do item de histórico | PopStateEvent |
| storageArea | Retorna um objeto que representa o objeto de armazenamento afetado | StorageEvent |
| target | Retorna o elemento que desencadeou o evento | Event |
| targetTouches | Retorna a lista de todos os objetos de toque em contato com a superfície e os eventos touchstart ocorreram no mesmo elemento-alvo que o elemento-alvo atual | TouchEvent |
| timeStamp | Retorna o tempo de criação do evento (em milissegundos em relação ao êxodo) | Event |
| total | Retorna a quantidade total de trabalho a ser carregado | ProgressEvent |
| touches | Retorna a lista de todos os objetos de toque em contato com a superfície atual | TouchEvent |
| transitionend | Este evento ocorre quando a conversão CSS é concluída | TransitionEvent |
| type | Retorna o nome do evento | Event |
| url | Retorna a URL do documento do item alterado | StorageEvent |
| which | Retorna o botão do mouse pressionado ao desencadear o evento do mouse | MouseEvent |
| which | Retorna o código Unicode do caractere que desencadeou o evento onkeypress, ou o código de chave Unicode do caractere que desencadeou os eventos onkeydown ou onkeyup. | KeyboardEvent |
| view | Retorna uma Referência para a Janela do Evento Ocorrido | UiEvent |
A tabela a seguir lista os métodos de eventos DOM：
| Método | Descrição | Tipo de Evento |
|---|---|---|
| createEvent() | Criar um Novo Evento | Event |
| getTargetRanges() | Retorna um Array Contendo o Alcance do Alvo, que Será Afetado pela Inserção/Efeito da Exclusão | InputEvent |
| getModifierState() | Retorna um Array Contendo o Alcance do Alvo, que Será Afetado pela Inserção/Efeito da Exclusão | MouseEvent |
| preventDefault() | Bloquear a Execução Padrão do Navegador do Elemento Selecionado | Event |
| stopImmediatePropagation() | Prevenir que outros Escutadores do Mesmo Evento Sejam Chamados | Event |
| stopPropagation() | Prevenir a Propagação de Eventos no Fluxo de Eventos | Event |
Tutorial de Javascript：Eventos do Javascript
Tutorial de Javascript：Escutador de Eventos
Tutorial de Javascript：Propagação de Eventos