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