Eventos em JavaScript: Guia Absolutamente Completo

Tempo de leitura: 9 minutos

O JavaScript é uma linguagem que vem crescendo a cada ano que passa e cada vez vai ficando mais popular entre os desenvolvedores.

Com o passar do tempo, foram se tornando conhecidas as inúmeras coisas que eram possíveis de ser realizadas com essa linguagem incrível, é por isso que ela vem cada vez mais ganhando mais adeptos.

De acordo com o Mozilla Developer, o JavaScript é uma linguagem de script orientada a objetos, multiplataforma.

É uma linguagem pequena e leve. Dentro de um ambiente de host (por exemplo, um navegador web) o JavaScript pode ser ligado aos objetos deste ambiente para prover um controle programático sobre eles.

JavaScript  tem uma biblioteca padrão de objetos, como: ArrayDate, e Math, e um conjunto de elementos que formam o núcleo da linguagem, tais como: operadores, estruturas de controle e declarações.

O núcleo do JavaScript pode ser estendido para uma variedade de propósitos, complementando assim a linguagem:

  • O lado cliente do JavaScript estende-se do núcleo linguagem, fornecendo objetos para controlar um navegador web e seu Document Object Model (DOM). Por exemplo, as extensões do lado do cliente permitem que uma aplicação coloque elementos em um formulário HTML e responda a eventos do usuário, como cliques do mouse, entrada de formulário e de navegação da página.
  • O lado do servidor do JavaScript estende-se do núcleo  da linguagem, fornecendo objetos relevantes à execução do JavaScript em um servidor. Por exemplo, as extensões do lado do servidor permitem que uma aplicação comunique-se com um banco de dados, garantindo a continuidade de informações de uma chamada para a outra da aplicação, ou executar manipulações de arquivos em um servidor.

Mais no artigo de hoje iremos entender um pouco o que são e como funcionam os eventos em JavaScript.

// O que é um evento?

// Tipo de evento: OnClick

// Tipo de evento: onsubmit

// onmouseover e onmouseout

// Eventos padrão HTML5

O que é um evento?

o que e 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, ela é chamada 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 utilizar esses eventos para executar respostas codificadas em JavaScript, o que faz com que os botões fechem as janelas, as mensagens sejam exibidas aos usuários, os dados sejam validados e praticamente qualquer outro tipo de resposta que você possa imaginar.

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

Aqui vamos ver alguns exemplos para entender uma relação entre evento e JavaScript.

Tipo de Evento: onclick

tipo de evento onclick

Esse é o tipo de evento mais usado que ocorre quando um usuário clica no botão esquerdo do mouse. Você pode colocar sua validação, aviso etc., neste tipo de evento.

Exemplo

Vamos fazer o seguinte exemplo.

<html>
   <head>
      
      <script type="text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
      
   </head>
   
   <body>
      <p>Clique no botão a seguir e veja o resultado</p>
      
      <form>
         <input type="button" onclick="sayHello()" value="Say Hello" />
      </form>
      
   </body>
</html>

Tipo de Evento: onsubmit

tipo de evento onsubmit

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

Exemplo:

O exemplo a seguir mostra como usar o onsubmit.

Aqui estamos chamando a função validate() antes de enviar um formulário para o servidor web. Se a função validate() retornar true, o formulário será submetido, caso contrário, não enviará os dados.

Vamos fazer o seguinte exemplo.

<html>
   <head>
   
      <script type="text/javascript">
         <!--
            function validation() {
               Toda validação vai aqui
               .........
               Retornar verdadeiro ou falso
            }
         //-->
      </script>
      
   </head>
   <body>
   
      <form method="POST" action="t.cgi" onsubmit="return validate()">
         .......
         <input type="submit" value="Submit" />
      </form>
      
   </body>
</html>

onmouseover e onmouseout

onmouseover e onmouseout

Esses dois tipos de eventos o ajudarão a criar efeitos interessantes com imagens ou até mesmo com texto.

O evento onmouseover dispara quando você traz o mouse sobre qualquer elemento e o onmouseout dispara quando você mover o mouse para fora daquele elemento.

Vamos tentar 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>Arraste o seu mouse para dentro da divisão para ver o resultado:</p> <div onmouseover="over()" onmouseout="out()"> <h2> Agora está dentro da divisão </h2> </div> </body> </html>

Eventos padrão HTML 5

eventos padrão html5

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

Atributo Valor Descrição
desligada script Aciona quando o documento fica off-line
Onabort script Triggers em um evento de aborto
onafterprint script Acionado depois que o documento é impresso
onbeforeonload script Triggers antes do carregamento do documento
onbeforeprint script Dispara antes que o documento seja impresso
onblur script Aciona quando a janela perde o foco
oncanplay script Aciona quando a mídia pode iniciar a reprodução, mas pode ter que parar para armazenar em buffer
oncanplaythrough script Aciona quando a mídia pode ser reproduzida até o final, sem parar para armazenar em buffer
em mudança script Aciona quando um elemento é alterado
onclick script Gatilhos em um clique do mouse
oncontextmenu script Aciona quando um menu de contexto é acionado
ondblclick script Gatilhos em um mouse, clique duas vezes
ondrag script Aciona quando um elemento é arrastado
ondragend script Gatilhos no final de uma operação de arrastar
ondragenter script Aciona quando um elemento foi arrastado para um destino de soltar válido
ondragleave script Aciona quando um elemento está sendo arrastado sobre um destino de soltar válido
ondragover script Gatilhos no início de uma operação de arrastar
ondragstart script Gatilhos no início de uma operação de arrastar
ondrop script Aciona quando o elemento arrastado está sendo solto
ondurationchange script Aciona quando o comprimento da mídia é alterado
onemptied script Aciona quando um elemento de recurso de mídia fica vazio de repente.
onended script Aciona quando a mídia chega ao final
onerror script Acionadores quando ocorre um erro
No foco script Aciona quando a janela recebe foco
onformchange script Aciona quando um formulário é alterado
onforminput script Aciona quando um formulário recebe entrada do usuário
onhaschange script Aciona quando o documento foi alterado
entrada script Aciona quando um elemento recebe entrada do usuário
oninvalid script Aciona quando um elemento é inválido
onkeydown script Aciona quando uma tecla é pressionada
onkeypress script Aciona quando uma tecla é pressionada e liberada
onkeyup script Aciona quando uma chave é liberada
carregando script Acionadores quando o documento é carregado
onloadeddata script Aciona quando os dados de mídia são carregados
onloadedmetadata script Aciona quando a duração e outros dados de mídia de um elemento de mídia são carregados
onloadstart script Aciona quando o navegador começa a carregar os dados de mídia
onmessage script Aciona quando a mensagem é acionada
onmousedown script Aciona quando um botão do mouse é pressionado
onmousemove script Aciona quando o ponteiro do mouse se move
onmouseout script Aciona quando o ponteiro do mouse sai de um elemento
onmouseover script Aciona quando o ponteiro do mouse se move sobre um elemento
onmouseup script Acionadores quando um botão do mouse é liberado
onmousewheel script Aciona quando a roda do mouse está sendo girada
onoffline script Aciona quando o documento fica off-line
onoine script Aciona quando o documento fica on-line
ononline script Aciona quando o documento fica on-line
onpagehide script Aciona quando a janela está oculta
onpageshow script Aciona quando a janela se torna visível
onpause script Aciona quando os dados de mídia são pausados
onplay script Aciona quando os dados de mídia começarão a ser reproduzidos
jogando script Aciona quando os dados de mídia começam a ser reproduzidos
onpopstate script Aciona quando o histórico da janela é alterado
em progresso script Aciona quando o navegador está buscando os dados da mídia
onratechange script Aciona quando a taxa de reprodução dos dados de mídia foi alterada
onreadystatechange script Aciona quando as alterações do estado pronto
onredo script Aciona quando o documento realiza um refazer
onresize script Aciona quando a janela é redimensionada
onscroll script Aciona quando a barra de rolagem de um elemento está sendo rolada
onseeked script Aciona quando o atributo em busca de um elemento de mídia não é mais verdadeiro e a busca terminou
procura script Aciona quando o atributo de busca de um elemento de mídia é verdadeiro e a busca foi iniciada
onselect script Aciona quando um elemento é selecionado
onstalled script Aciona quando há um erro ao buscar dados de mídia
onstorage script Acionadores quando um documento é carregado
onsubmit script Aciona quando um formulário é enviado
onsuspend script Aciona quando o navegador estiver buscando dados de mídia, mas parou antes que todo o arquivo de mídia fosse buscado
ontimeupdate roteiro Aciona quando a mídia muda sua posição de reprodução
onundo script Aciona quando um documento executa um desfazer
onunload script Aciona quando o usuário sai do documento
onvolumechange script Aciona quando a mídia altera o volume, também quando o volume está definido como “mudo”
aguardando script Aciona quando a mídia parou de ser reproduzida, mas espera-se que seja retomada

Conclusão de Eventos em JavaScript

conclusao eventos em javascript

Gostou do artigo de Eventos em JavaScript? O que acha de se aprofundar ainda mais nessa incrível linguagem e construir aplicações extraordinárias?

No nosso curso de Front-end, construímos projetos completos utilizando JavaScript de todas as formas para criar os mais variados eventos em um Website, se não conhece como funciona, clica aqui e veja como é o nosso Curso de Front-End Completo.