JavaScript - Eventos

O que é um evento?

A interação do JavaScript com o HTML é tratada por meio de eventos que ocorrem quando o usuário ou o navegador manipula uma página.

Quando a página é carregada, é chamado de evento. Quando o usuário clica em um botão, esse clique também é um evento. Outros exemplos incluem eventos como pressionar qualquer tecla, fechar uma janela, redimensionar uma janela, etc.

Os desenvolvedores podem usar esses eventos para executar respostas codificadas em JavaScript, o que faz com que os botões fechem janelas, mensagens a serem exibidas aos usuários, dados a serem validados e virtualmente qualquer outro tipo de resposta imaginável.

Os eventos fazem parte do Document Object Model (DOM) Nível 3 e cada elemento HTML contém um conjunto de eventos que podem acionar o código JavaScript.

Por favor, siga este pequeno tutorial para uma melhor compreensão da Referência de Eventos HTML . Aqui, veremos alguns exemplos para entender a relação entre Evento e JavaScript -

Tipo de evento onclick

Este é o tipo de evento usado com mais frequência que ocorre quando um usuário clica com o botão esquerdo do mouse. Você pode colocar sua validação, aviso, etc., contra este tipo de evento.

Exemplo

Experimente o seguinte exemplo.

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button and see result</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello" />
      </form>      
   </body>
</html>

Resultado

onsubmit Tipo de evento

onsubmité um evento que ocorre quando você tenta enviar um formulário. Você pode colocar sua validação de formulário contra este tipo de evento.

Exemplo

O exemplo a seguir mostra como usar onsubmit. Aqui estamos chamando devalidate()função antes de enviar os dados do formulário ao servidor da web. E sevalidate() Se a função retornar true, o formulário será enviado, caso contrário, não enviará os dados.

Experimente o seguinte exemplo.

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function validation() {
               all validation goes here
               .........
               return either true or false
            }
         //-->
      </script>      
   </head>
   
   <body>   
      <form method = "POST" action = "t.cgi" onsubmit = "return validate()">
         .......
         <input type = "submit" value = "Submit" />
      </form>      
   </body>
</html>

onmouseover e onmouseout

Esses dois tipos de eventos o ajudarão a criar bons efeitos com imagens ou até mesmo com texto. oonmouseover o evento é acionado quando você passa o mouse sobre qualquer elemento e o onmouseouté acionado quando você move o mouse para fora desse elemento. Experimente o seguinte exemplo.

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function over() {
               document.write ("Mouse Over");
            }            
            function out() {
               document.write ("Mouse Out");
            }            
         //-->
      </script>      
   </head>
   
   <body>
      <p>Bring your mouse inside the division to see the result:</p>      
      <div onmouseover = "over()" onmouseout = "out()">
         <h2> This is inside the division </h2>
      </div>         
   </body>
</html>

Resultado

Eventos padrão HTML 5

Os eventos HTML 5 padrão estão listados aqui para sua referência. Aqui, o script indica uma função Javascript a ser executada nesse evento.

Atributo	Valor	Descrição
desligada	roteiro	Aciona quando o documento fica offline
Onabort	roteiro	Aciona em um evento de aborto
uma impressão posterior	roteiro	Aciona após o documento ser impresso
onbeforeonload	roteiro	Aciona antes de o documento carregar
na frente da impressão	roteiro	Aciona antes de o documento ser impresso
onblur	roteiro	Aciona quando a janela perde o foco
oncanplay	roteiro	Aciona quando a mídia pode iniciar a reprodução, mas pode ter que parar para armazenamento em buffer
oncanplaythrough	roteiro	Aciona quando a mídia pode ser reproduzida até o fim, sem parar para armazenamento em buffer
em mudança	roteiro	Aciona quando um elemento muda
onclick	roteiro	Dispara com um clique do mouse
oncontextmenu	roteiro	Aciona quando um menu de contexto é acionado
ondblclick	roteiro	Dispara com um clique duplo do mouse
ondrag	roteiro	Aciona quando um elemento é arrastado
ondragend	roteiro	Aciona no final de uma operação de arrastar
Ondragenter	roteiro	Aciona quando um elemento é arrastado para um destino de soltar válido
Ondragleave	roteiro	Aciona quando um elemento está sendo arrastado sobre um destino de soltar válido
Ondragover	roteiro	Aciona no início de uma operação de arrastar
ondragstart	roteiro	Aciona no início de uma operação de arrastar
ondrop	roteiro	Aciona quando o elemento arrastado está sendo solto
mudança de ondulação	roteiro	Aciona quando o comprimento da mídia é alterado
esvaziado	roteiro	Aciona quando um elemento de recurso de mídia fica vazio repentinamente.
ligado	roteiro	Aciona quando a mídia chega ao fim
onerror	roteiro	Aciona quando ocorre um erro
No foco	roteiro	Aciona quando a janela ganha o foco
onformchange	roteiro	Aciona quando um formulário muda
onforminput	roteiro	Aciona quando um formulário recebe entrada do usuário
onhaschange	roteiro	Aciona quando o documento muda
entrada	roteiro	Aciona quando um elemento obtém entrada do usuário
oninvalid	roteiro	Aciona quando um elemento é inválido
onkeydown	roteiro	Aciona quando uma tecla é pressionada
onkeypress	roteiro	Aciona quando uma tecla é pressionada e liberada
onkeyup	roteiro	Aciona quando uma tecla é liberada
carregando	roteiro	Aciona quando o documento carrega
onloadeddata	roteiro	Aciona quando os dados da mídia são carregados
onloadedmetadata	roteiro	Aciona quando a duração e outros dados de mídia de um elemento de mídia são carregados
onloadstart	roteiro	Aciona quando o navegador começa a carregar os dados de mídia
mensagem	roteiro	Aciona quando a mensagem é acionada
onmousedown	roteiro	Aciona quando um botão do mouse é pressionado
onmousemove	roteiro	Aciona quando o ponteiro do mouse se move
onmouseout	roteiro	Aciona quando o ponteiro do mouse sai de um elemento
no mouse	roteiro	Aciona quando o ponteiro do mouse se move sobre um elemento
onmouseup	roteiro	Aciona quando um botão do mouse é liberado
onmousewheel	roteiro	Aciona quando a roda do mouse está sendo girada
on-line	roteiro	Aciona quando o documento fica offline
onoine	roteiro	Aciona quando o documento fica online
on-line	roteiro	Aciona quando o documento fica online
no couro da página	roteiro	Aciona quando a janela está oculta
onpageshow	roteiro	Aciona quando a janela se torna visível
em pausa	roteiro	Aciona quando os dados de mídia são pausados
em jogo	roteiro	Aciona quando os dados de mídia vão começar a ser reproduzidos
tocando	roteiro	Aciona quando os dados de mídia começam a ser reproduzidos
onpopstate	roteiro	Aciona quando o histórico da janela muda
em progresso	roteiro	Aciona quando o navegador busca os dados de mídia
onratechange	roteiro	Aciona quando a taxa de reprodução dos dados de mídia muda
onreadystatechange	roteiro	Aciona quando o estado de prontidão muda
Onredo	roteiro	Aciona quando o documento executa um refazer
onresize	roteiro	Aciona quando a janela é redimensionada
onscroll	roteiro	Aciona quando a barra de rolagem de um elemento está sendo rolada
procurado	roteiro	Aciona quando o atributo de busca de um elemento de mídia não é mais verdadeiro e a busca termina
em busca	roteiro	Aciona quando o atributo de busca de um elemento de mídia é verdadeiro e a busca começa
onselect	roteiro	Aciona quando um elemento é selecionado
montado	roteiro	Aciona quando há um erro na busca de dados de mídia
no armazenamento	roteiro	Aciona quando um documento é carregado
onsubmit	roteiro	Aciona quando um formulário é enviado
suspender	roteiro	Aciona quando o navegador busca dados de mídia, mas é interrompido antes que todo o arquivo de mídia seja buscado
ontimeupdate	roteiro	Aciona quando a mídia muda sua posição de reprodução
onundo	roteiro	Aciona quando um documento desfaz
onunload	roteiro	Aciona quando o usuário sai do documento
onvolumechange	roteiro	Aciona quando a mídia altera o volume, também quando o volume está definido como "mudo"
esperando	roteiro	Aciona quando a mídia para de reproduzir, mas espera-se que retome