ES6 - Eventos

O JavaScript destina-se a adicionar interatividade às suas páginas. JavaScript faz isso usando um mecanismo que usa eventos.Events 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.

Um evento é uma ação ou ocorrência reconhecida pelo software. Pode ser acionado por um usuário ou sistema. Alguns exemplos comuns de eventos incluem um usuário clicando em um botão, carregando a página da web, clicando em um hiperlink e assim por diante. A seguir estão alguns dos eventos HTML comuns.

Manipuladores de eventos

Na ocorrência de um evento, a aplicação executa um conjunto de tarefas relacionadas. O bloco de código que atinge esse propósito é chamado deeventhandler. Cada elemento HTML possui um conjunto de eventos associados a ele. Podemos definir como os eventos serão processados ​​em JavaScript usando manipuladores de eventos.

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

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

A seguinte saída é exibida na execução bem-sucedida do código acima.

onsubmitEvent Type

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.

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

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.

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>

A seguinte saída é exibida na execução bem-sucedida do código acima.

Eventos padrão HTML 5

Os eventos HTML 5 padrão estão listados na tabela a seguir para sua referência. 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 do carregamento do documento
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 deixa um alvo de soltar válido
Ondragover roteiro Aciona quando um elemento está sendo arrastado sobre um destino de soltar válido
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 de repente
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 é alterado
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
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 muda o volume, também quando o volume está definido como "mudo"
esperando roteiro Aciona quando a reprodução da mídia para, mas espera-se que continue