HTML - Eventos Globais das tags HTML

Eventos são ações disparadas pela tag como, por exemplo, o click em um botão dispara o evento onclick.
Essas ações disparadas são tratadas por processos escritos dentro de scripts.
Importante : Podemos adicionar eventos em tags que sequer foram contruídas com tal finalidade. É o caso do click num inputbox ou textbox. Essas tags não foram feitas para gerar esse tipo de evento mas o DOM aceita esse tratamento numa boa.

Exemplo de tratamento de um evento :
<button type="button" class="btn" onClick="exibeAlerta();">Exibir Alerta</button>
function exibeAlerta(){ {
    alert('oi');
}

Teste prático do acionamento do evento acima:

Eventos disparados pela janela(window). Estes eventos são associados a tag body
Atributo Descrição
onactivate Obsoleta, não utilizar porque foi removida do padrão HTML.
O evento activate é disparado em um elemento quando ele se torna ativo, como quando ele é clicado com o mouse ou um pressionamento de tecla é usado para navegar até ele (atalho : veja propriedade AccessKey).
onafterupdate Ocorre na atualização dos dados de um objeto de ligação de dados.
Se o conteúdo de um objeto de ligação de dados for modificado e o objeto de ligação de dados perder o estado ativo, os dados associados no objeto de origem de dados serão atualizados. Nesse caso, o evento onbeforeupdate é disparado antes e o evento onafterupdate é disparado após o processo de atualização. Se ocorrer um erro durante a atualização, o evento onerrorupdate é disparado em vez do evento onafterupdate.
onbeforedeactivate Ocorre no elemento ativo quando ele perde o estado ativo.
onbeforeeditfocus Ocorre antes de um elemento input: file, input: password, input: text ou textarea ou um elemento em uma região editável tornar-se ativado pela IU.
onbeforeupdate Ocorre em um objeto de ligação de dados antes de atualizar os dados no objeto de origem de dados.
Se o conteúdo de um objeto de ligação de dados for modificado e o objeto de ligação de dados perder o estado ativo, os dados associados no objeto de origem de dados serão atualizados. Nesse caso, o evento onbeforeupdate é disparado antes e o evento onafterupdate é disparado após o processo de atualização. Se ocorrer um erro durante a atualização, o evento onerrorupdate é disparado em vez do evento onafterupdate.
Esses eventos ocorrem no objeto de ligação de dados. Se você precisar de um evento que ocorra no objeto de fonte de dados quando seus dados forem alterados, use o evento oncellchange.
oncellchange Ocorre em um objeto de fonte de dados quando os dados nele são alterados.
Nota: não há relacionamento entre o evento oncellchange e o elemento de célula HTML. Este evento faz parte das técnicas de vinculação de dados no Internet Explorer.
oncontrolselect Ocorre antes de um controle ser selecionado em uma região editável.
Uma região editável pode ser especificada com as propriedades contentEditable e designMode. Para obter os controles selecionados em uma região editável, use os métodos createRange e createRangeCollection. Para obter mais detalhes, consulte as páginas das propriedades e métodos mencionados.
ondataavailable Ocorre sempre que um novo bloco de dados fica disponível na origem.
O evento ondataavailable é útil para solicitações assíncronas se você deseja iniciar o processamento de dados assim que estiverem disponíveis.
Use a propriedade async e o método load do objeto XMLDocument para carregar um documento XML de forma assíncrona.
ondatasetchanged Ocorre em um objeto de fonte de dados quando o conjunto de dados inicial ou novo se torna disponível.
ondatasetcomplete Ocorre em um objeto de fonte de dados quando todos os seus dados ficam disponíveis.
ondeactivate Dispara quando o activeElement é alterado do objeto atual para outro objeto no documento pai.
onerrorupdate Ocorre em um objeto de ligação de dados quando ele não pode atualizar os dados no objeto de origem de dados.
Se o conteúdo de um objeto de ligação de dados for modificado e o objeto de ligação de dados perder o estado ativo, os dados associados no objeto de origem de dados serão atualizados. Nesse caso, o evento onbeforeupdate é disparado antes e o evento onafterupdate é disparado após o processo de atualização. Se ocorrer um erro durante a atualização, o evento onerrorupdate é disparado em vez do evento onafterupdate.
Esses eventos ocorrem no objeto de ligação de dados. Se você precisar de um evento que ocorra no objeto de fonte de dados quando seus dados forem alterados, use o evento oncellchange.
onfilterchange Ocorre depois que um filtro muda ou termina uma transição.
Filtros visuais e transições podem ser definidos ou recuperados com a propriedade de estilo de filtro ou o objeto de filtro.
onlayoutcomplete Disparado quando o processo de impressão ou visualização de impressão termina de preencher o objeto LayoutRect atual com o conteúdo do documento de origem.
onmove Ocorre quando a posição do canto superior esquerdo de um elemento é alterada.
Para obter o canto superior esquerdo de um elemento, use as propriedades clientTop, clientLeft, offsetTop e offsetLeft.
O posicionamento de um elemento pode ser especificado com as propriedades de estilo esquerda, superior, direita, inferior, largura e altura. As propriedades esquerda, superior, direita e inferior só têm efeito em elementos posicionados relativos, absolutos ou fixos. Quando a posição do canto superior esquerdo de um elemento com posição absoluta ou fixa é alterada, um evento onmove é disparado no elemento. O evento onmove não é disparado em elementos posicionados estáticos e relativos.
A posição dos elementos em uma região editável (consulte as propriedades contentEditable e designMode) pode ser modificada pelo usuário por meio da interface do usuário. Quando o usuário modifica a posição de um elemento de controle (consulte os controles de formulário) ou um elemento posicionado de forma relativa ou absoluta em uma região editável, um evento onmove é disparado no elemento.
Nota: os elementos posicionados não são móveis por padrão nas regiões editáveis; use o comando Posição 2D para ativá-lo.
Se você gostaria de receber uma notificação quando o tamanho de um elemento muda, use o evento onresize.
onmoveend Ocorre quando o usuário para de arrastar um elemento posicionado absoluto ou relativo em uma região editável.
Uma região editável pode ser especificada com as propriedades contentEditable e designMode.
Os elementos posicionados não são móveis por padrão nas regiões editáveis; use o comando Posição 2D para ativá-lo.
Se você gostaria de receber uma notificação quando o usuário parar de redimensionar um elemento, use o evento onresizeend.
onmovestart Ocorre quando o usuário começa a arrastar um elemento posicionado absoluto ou relativo em uma região editável.
Uma região editável pode ser especificada com as propriedades contentEditable e designMode.
Os elementos posicionados não são móveis por padrão nas regiões editáveis; use o comando Posição 2D para ativá-lo.
O evento onmovestart é cancelável; se for cancelado, a operação de arrastar não inicia. Se você gostaria de receber uma notificação quando o usuário começar a redimensionar um elemento, use o evento onresizestart.
onpropertychange Ocorre sempre que o valor da propriedade de um elemento é alterado.
O valor de uma propriedade pode ser modificado diretamente por script ou indiretamente por meio da interface do usuário nas seguintes situações :
1-Quando o estado verificado de um elemento input: checkbox ou input: radio é modificado, a propriedade CHECKED é alterada.
2-Quando o conteúdo de um elemento input: text ou textarea é modificado, a propriedade value é alterada.
3-Quando a seleção em um elemento selecionado é modificada, a propriedade selectedIndex é alterada.

O evento onpropertychange é disparado em ambos os casos (direto e indireto). Você pode usar a propriedade propertyName do objeto de evento nos manipuladores de eventos para o evento onpropertychange para obter o nome da propriedade modificada.
Para obter funcionalidade semelhante no Firefox e Opera (e no Internet Explorer a partir da versão 9), use o evento DOMAttrModified. Ele dispara quando uma propriedade é adicionada, modificada ou removida por script, mas não dispara quando a modificação é feita por meio da interface do usuário. Veja os exemplos abaixo para detalhes. O evento onpropertychange apresenta erros no Internet Explorer 9. Ele não é disparado quando os caracteres são excluídos de um campo de texto (como input: text e textarea) por meio da interface do usuário apenas quando os caracteres são inseridos. Embora o evento oninput seja compatível com o Internet Explorer a partir da versão 9, mas de maneira semelhante ao evento onpropertychange, ele também apresenta erros e não é disparado na exclusão. Outro evento semelhante é o evento onchange entre navegadores, mas ocorre depois que o elemento perde o foco, não imediatamente após a modificação.
Como os caracteres podem ser excluídos de várias maneiras (teclas Backspace e Delete, CTRL + X, comandos Recortar e Excluir no menu de contexto), não há uma boa solução para detectar todas as alterações. Se os caracteres forem excluídos pelo comando Excluir do menu de contexto, a modificação não poderá ser detectada em JavaScript no Internet Explorer 9.
Embora o método addEventListener seja compatível com o Internet Explorer a partir da versão 9, ele não funciona para o evento propertychange. Se você deseja registrar um ouvinte para o evento onpropertychange, use o método attachEvent.
onreadystatechange Ocorre quando o estado de carregamento dos dados que pertencem a um elemento ou documento HTML é alterado.
O evento onreadystatechange é disparado em um documento HTML quando o estado de carregamento do conteúdo da página muda.
No Internet Explorer, o evento onreadystatechange também pode ocorrer em elementos. Os elementos applet, embed, frame, frameset, iframe, img, input: image, link, script, xml oferecem suporte ao evento onreadystatechange porque carregam dados. Além disso, como o Internet Explorer fornece uma maneira de anexar arquivos de comportamento externos a qualquer elemento (propriedade de estilo de comportamento e método addBehavior), um evento onreadystatechange pode ocorrer em qualquer elemento quando o estado de carregamento de um arquivo de comportamento anexado é alterado.
Use a propriedade readyState em seu manipulador de eventos para o evento onreadystatechange para obter o estado atual.
Se você precisar do evento onreadystatechange para solicitações http (AJAX), consulte o evento onreadystatechange do objeto XMLHttpRequest.
onrowenter Ocorre em um objeto de fonte de dados quando a linha atual nele é alterada.
Use o evento onrowexit para receber uma notificação antes que a linha atual seja alterada.
onrowexit Ocorre em um objeto de fonte de dados antes que a linha atual nele é alterada.
Se a linha atual não for uma linha existente (não inicializada, apontando para a posição antes do primeiro registro (BOF é verdadeiro) ou após o último registro (EOF é verdadeiro)) e a linha atual muda, o evento onrowexit não é disparado.
Para obter mais detalhes sobre objetos de fonte de dados, consulte a página do objeto de conjunto de registros.
Use o evento onrowenter para receber uma notificação quando a linha atual for alterada.
onrowsdelete Ocorre em um objeto de fonte de dados antes que as linhas sejam excluídas.
onrowsinserted Ocorre em um objeto de fonte de dados quando as linhas são inseridas no objeto.
onselectstart Ocorre no início de um processo de seleção.
Contudo o evento onselectstart é cancelável, se você cancelá-lo, o processo de seleção não inicia.
onafterprint Script a ser executado após a impressão do documento
onbeforeprint Script a ser executado antes da impressão do documento.
onbeforeunload Script a ser executado quando o documento estiver prestes a ser descarregado
onerror Script a ser executado quando ocorrer um erro
onhashchange Script a ser executado quando houver alterações na parte âncora da URL
onload Evento disparado após o carregamento da página
onmessage Script a ser executado quando a mensagem é acionada.
onoffline Script a ser executado quando o navegador começar a funcionar offline
ononline Script a ser executado quando o navegador começar a funcionar online
onpagehide Script a ser executado quando um usuário sai de uma página
onpageshow Script a ser executado quando um usuário navega para uma página
onpopstate Script a ser executado quando o histórico da janela for alterado
onresize Evento disparado quando a janela do navegador é redimensionada
onresizeend Ocorre quando o usuário para de redimensionar um elemento em uma região editável.
Uma região editável pode ser especificada com as propriedades contentEditable e designMode.
Se você deseja receber uma notificação quando o usuário parar de arrastar um elemento, use o evento onmoveend.
onresizestart Ocorre quando o usuário começa a redimensionar um elemento em uma região editável.
Uma região editável pode ser especificada com as propriedades contentEditable e designMode.
Se desejar receber uma notificação quando o usuário começar a arrastar um elemento, use o evento onmovestart.
onstorage Script a ser executado quando uma área de Armazenamento na Web é atualizada
onunload Evento disparado quando uma página é descarregada (ou a janela do navegador é fechada)


Os eventos abaixo são acionados por ações dentro de um formulário HTML mas podem ser aplicados a quase todos os elementos HTML :

Eventos disparados pelo formulário(form)
Atributo Descrição
onblur Evento disparado o momento em que o elemento perde o foco
onchange Evento disparado o momento em que o valor do elemento é alterado
oncontextmenu Script a ser executado quando um menu de contexto é acionado
onfocus Evento disparado no momento em que o elemento fica em foco
onfocusin Ocorre antes de um elemento receber o foco.
O evento onfocusin borbulha (bubbling de eventos) (ao contrário do evento onfocus), portanto, se você quiser detectar se um elemento ou seu filho obtém o foco, é suficiente ouvir o evento onfocusin do elemento.
No Opera, Google Chrome e Safari, use o evento DOMFocusIn em vez do evento onfocusin.
No Firefox, se você precisar detectar se um filho de um elemento obtém o foco, use um ouvinte de captura para o evento onfocus.
Para detectar quando um elemento perde o foco, use os eventos onblur, onfocusout e DOMFocusOut.
onfocusout O evento onfocusout ocorre quando um elemento está prestes a perder o foco.
Dica: O evento onfocusout é semelhante ao evento onblur.
A principal diferença é que o evento onblur não borbulha (bubbling de eventos).
Portanto, se você deseja descobrir se um elemento ou seu filho perde o foco, você deve usar o evento onfocusout.
oninput Script a ser executado quando um elemento obtém entrada do usuário
oninvalid Script a ser executado quando um elemento é inválido
onreset Dispara quando o botão Redefinir(Reset) em um formulário é clicado
onsearch Dispara quando o usuário escreve algo em um campo de pesquisa(para <input ="search">)
onselect Dispara após a seleção de algum texto em um elemento
onsubmit Dispara quando um formulário é enviado (Submitted)


Eventos disparados pelo Teclado(keyboard)
Atributo Descrição
onhelp Ocorre depois que o usuário pressiona a tecla F1.
onkeydown Evento disparado quando um usuário está pressionando uma tecla
onkeypress Evento disparado quando um usuário pressiona uma tecla
onkeyup Evento disparado quando um usuário libera uma tecla


Eventos disparados peloMouse
Atributo Descrição
onclick Evento disparado quando o elemento é clicado com o mouse
ondblclick Evento disparado quando o elemento é clicado com o mouse duas vezes
onlosecapture Ocorre quando o objeto perde a captura do mouse.
Para definir um objeto para capturar eventos do mouse, use o método setCapture. Para remover a captura do mouse, use o método releaseCapture. Para obter mais detalhes sobre o mecanismo de captura consulte o método setCapture.
onmousedown Evento disparado quando um botão do mouse é pressionado no elemento (mas não liberado)
onmouseenter Ocorre quando o usuário move o ponteiro do mouse para a área de um elemento.
O evento onmouseenter é compatível apenas com o Internet Explorer, para uma solução para vários navegadores, use o evento onmouseover. A única diferença entre os eventos onmouseenter e onmouseover é que o evento onmouseover se propaga para cima na hierarquia do documento, enquanto o onmouseenter não.
Use o evento onmousemove para receber uma notificação quando o usuário move o ponteiro do mouse sobre e o evento onmouseout para receber uma notificação quando o usuário move o ponteiro do mouse para fora de um elemento.
Observação: o evento onmouseenter não é disparado durante uma operação de arrastar. Para esse caso, use o evento ondragenter.
onmouseleave Ocorre quando o usuário move o ponteiro do mouse para fora do elemento.
O evento onmouseleave é compatível apenas com o Internet Explorer, para uma solução entre navegadores, use o evento onmouseout. A única diferença entre os eventos onmouseleave e onmouseout é que o evento onmouseout se propaga na hierarquia do documento, enquanto o onmouseleave não.
Use o evento onmouseover para receber uma notificação quando o usuário move o ponteiro do mouse para dentro e o evento onmousemove para receber uma notificação quando o usuário move o ponteiro do mouse sobre um elemento.
Nota: o evento onmouseleave não é disparado durante uma operação de arrastar. Para esse caso, use o evento ondragleave.
onmousemove Evento disparado quando o ponteiro do mouse está se movendo sobre um elemento
onmouseout Evento disparado quando o ponteiro do mouse sai do elemento
onmouseover Evento disparado quando o ponteiro do mouse se move sobre o elemento
onmouseup Evento disparado quando um botão do mouse é liberado sobre o elemento
onmousewheel Obsoleta. Use o atributo onwheel
onwheel Evento disparado quando o botão de rolagem do mouse rola para cima ou para baixo sobre o elemento


Eventos disparados pelo Arrasto do Mouse (Drag Events)
Atributo Descrição
ondrag Script a ser executado quando um elemento é arrastado
ondragenter
ondragend Script a ser executado no final de uma operação de arrastar
ondragleave Script a ser executado quando um elemento deixa um destino de recebimento válido
ondragover Script a ser executado quando um elemento está sendo arrastado sobre um destino de recebimento válido
ondragstart Script a ser executado no início de uma operação de arrastar
ondrop Script a ser executado quando o elemento arrastado estiver sendo descartado
onscroll Script a ser executado quando a barra de rolagem de um elemento está sendo rolada


Eventos disparados pelo Clipboard(Copiar e Colar)
Atributo Descrição
onbeforecopy No Internet Explorer, o evento onbeforecopy ocorre no elemento mais profundo da hierarquia DOM que contém a seleção inteira.
No Google Chrome e no Safari, o evento onbeforecopy ocorre no elemento mais profundo da hierarquia DOM que contém o ponto inicial da seleção.
onbeforecut O evento onbeforecut é útil se você deseja habilitar o item de menu Cortar para textos que não estão em um elemento editável (textarea, input: text, input: file e input: password) e não em uma região editável (veja o contentEditable e designMode propriedades).
Para habilitar o item de menu Cortar para um elemento, retorne false de um manipulador de eventos para o evento onbeforecut nele.
onbeforepaste Ocorre antes de o conteúdo da área de transferência ser colado no documento e oferece a possibilidade de ativar o item de menu Colar.
O evento onbeforepaste é útil se você deseja habilitar o item de menu Colar para um elemento não editável (textarea, input: text, input: file e input: password) em uma região não editável (consulte as propriedades contentEditable e designMode).
Para habilitar o item de menu Colar para um elemento, retorne false de um manipulador de eventos para o evento onbeforepaste nele.
oncopy Evento disparado quando o usuário copia o conteúdo do elemento
oncut Evento disparado quando o usuário recorta o conteúdo do elemento para ser colado futuramente em outro lugar
onpaste Evento disparado quando o usuário cola algum conteúdo no elemento


Os eventos abaixo são acionados por mídias como vídeos, imagens e áudio (se aplica a todos os elementos HTML, mas é mais comum em elementos de mídia, como <audio>, <embed>, <img>, <object> e <video>).

Eventos disparados por Mídias
Atributo Descrição
onabort Script a ser executado em anular (abort)
oncanplay Script a ser executado quando um arquivo está pronto para começar a jogar (quando ele tem buffer suficiente para começar)
oncanplaythrough Script a ser executado quando um arquivo pode ser reproduzido todo o caminho até o final sem pausar para armazenamento em buffer
oncuechange Script a ser executado quando a sugestão muda em um elemento de< Track>
ondurationchange Script a ser executado quando o comprimento da mídia muda
onemptied Script para ser executado quando algo ruim acontece e o arquivo está de repente indisponível (como desconecta inesperadamente)
onended Script a ser executado quando a mídia chegar ao fim (um evento útil para mensagens como "Obrigado por ouvir")
onerror Script a ser executado quando ocorre um erro quando o arquivo está sendo carregado
onloadeddata Script a ser executado quando os dados de mídia são carregados
onloadedmetadata Script a ser executado quando os meta-dados (como dimensões e duração) são carregados
onloadstart Script a ser executado assim como o arquivo começa a carregar antes de qualquer coisa é realmente carregado
onpause Script a ser executado quando a mídia é pausada pelo usuário ou programaticamente
onplay Script a ser executado quando a mídia está pronta para começar a jogar
onplaying Script a ser executado quando a mídia realmente começou a tocar
onprogress Script a ser executado quando o navegador está no processo de obter os dados de mídia
onratechange Script a ser executado cada vez que a taxa de reprodução muda (como quando um usuário alterna para um modo de movimento lento ou avanço rápido)
onseeked Script a ser executado quando o atributo buscando é definido como false indicando que a busca terminou
onseeking Script a ser executado quando o atributo buscando é definido como true indicando que buscando está ativo
onstalled Script a ser executado quando o navegador é incapaz de buscar os dados de mídia por qualquer motivo
onsuspend O script a ser executado ao buscar os dados de mídia é interrompido antes de ser completamente carregado por qualquer motivo
ontimeupdate Script a ser executado quando a posição de reprodução foi alterada (como quando o usuário avança rapidamente para um ponto diferente na mídia)
onvolumechange Script a ser executado cada vez que o volume é alterado que (inclui a definição do volume para "Mute")
onwaiting Script a ser executado quando a mídia fez uma pausa, mas é esperado para retomar (como quando a mídia pausa para buffer mais dados)


Eventos disparados por Miscelaneas (Misc Events)
Atributo Descrição
ontoggle Evento disparado quando o usuário abre ou fecha o elemento <details>


Referência : w3schools