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> |