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 desse ambiente para prover um controle programático sobre eles.
JavaScript tem uma biblioteca padrão de objetos, como: Array, Date, 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?
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
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
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
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
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 |
|---|---|---|
| off | 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 |
| onchange | 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 |
| onfocus | 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 |
| input | 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 |
| loading | 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 |
| playing | script | Aciona quando os dados de mídia começam a ser reproduzidos |
| onpopstate | script | Aciona quando o histórico da janela é alterado |
| progress | 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 |
| onsearch | 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” |
| waiting | script | Aciona quando a mídia parou de ser reproduzida, mas espera-se que seja retomada |
Conclusão de 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.
