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