Eventos
Quando falamos de eventos em Javascript, nos referimos a determinados acontecimentos dentro do navegador. Vejamos alguns exemplos comuns de eventos em Javascript:
Evento | descrição |
---|---|
onclick | Quando o usuário clica em algum elemento da página. |
onchange | Quando um elemento HTML muda. É muito comum utilizar esse evento para controlar o preenchimento de campos de um formulário. |
onmouseover | Quando o usuário passa o cursor sobre algum elemento. |
onmouseout | Quando o cursor que estava sobre algum elemento, sai. |
onkeydown | Quando alguma tecla é pressionada. |
Nós podemos definir funções para serem invocadas sempre que um desses eventos forem registrados pelo navegador. Isso nos leva a uma situação muito interessante, pois a partir de agora vamos poder começar a criar páginas interativas, que vão responder a ações do usuário.
Com esse conhecimento vamos conseguir criar, por exemplo, elementos que iniciam escondidos e aparecem apenas após um clique, como são normalmente feitos os menus de navegação em telas de celular. Podemos também criar questionários interativos, jogos e aplicações completas que tem o funcionamento baseado em respostas a eventos da página.
É importante ressaltar que esta maneira de trabalhar com eventos não é exclusiva da linguagem Javascript ou do navegador, praticamente qualquer aplicação com interface gráfica é escrita de forma a ficar em estado de espera até que algum evento aconteça.
onclick, onmouseover e onmouseout
Vejamos abaixo um exemplo simples:
HTML:
<button id="click-me">Clique aqui</button>
<button id="hover-me">Passe o cursor aqui</button>
<button id="leave-me">Passe o cursor e depois saia</button>
Javascript:
document.getElementById("click-me").onclick = function() {
alert('Você clicou no botão');
};
document.getElementById("hover-me").onmouseover = function() {
alert('Você passou o cursor por cima do botão');
};
document.getElementById("leave-me").onmouseout = function() {
alert('Você passou o cursor por cima do botão e depois saiu');
};
Quando carregamos a página, os elementos html viram objetos do DOM. Estes objetos têm propriedades que levam o mesmo nome dos eventos. Estas propriedades inicialmente estão vazias (null). Quando definimos uma função para estas propriedades, elas se comportam como métodos deste objeto. Neste momento o navegador passa a monitorar o evento e invoca a função quando o evento ocorre.
onkeydown
O evento onkeydown pode ser aplicado a um elemento específico. Faria sentido, por exemplo, aplicá-lo a um campo de formulário, desta maneira quando o usuário digitasse alguma coisa dentro deste campo, o evento seria registrado. Mas este evento pode ser aplicado também ao objeto document (aquele que fica no topo da árvore do DOM). Desta maneira, em qualquer lugar da página que estivermos, o evento será monitorado. Escreva o código abaixo, recarregue a página e experimente apertar qualquer tecla.
document.onkeydown = function() {
alert('Você apertou alguma tecla');
};
É possível também monitorar alguma tecla específica. Primeiro temos que saber como o Javascript reconhece que tecla foi pressionada. Para isso vamos adicionar uma coisa ao alert:
document.onkeydown = function() {
alert('Você apertou a tecla: ' + event.keyCode);
};
Dentro da função que estamos associando a um evento, podemos usar o objeto event, que nos dá informações adicionais sobre o evento em questão. Neste caso usamos a propriedade keyCode, que nos retorna o código Unicode do caractere pressionado no teclado. Usamos então o sinal de '+' para concatenar com a mensagem no alert.
Desta forma, podemos descobrir por exemplo, que o código da letra 'a' é 65. Com esta informação, poderíamos montar uma função que só é invocada se o event.keyCode retornar 65, ou seja, quando a letra 'a' for pressionada. Mas para fazer isso precisamos ainda aprender sobre condicionais, assunto que vamos ver em breve.
Manipulação de evento via atributo html
Nos exemplos acima, manipulamos eventos usando objetos do DOM e a propriedade getElementById. Também é possível fazer isto diretamente via atributos html. Veja, como ficaria o exemplo do onclick.
<button onclick="show_alert()">Clique Aqui</button>
O funcionamento é parecido. Estamos associando a função show_alert à propriedade onclick do objeto do DOM correspondente a este elemento. Agora o que falta é criar esta função no código Javascript:
function show_alert() {
alert('Você clicou no botão');
}
As duas maneiras de trabalhar com eventos funcionam e, portanto, esta escolha fica a nosso critério. A crítica feita ao uso via atributo html é que isso deixa o código html e javascript misturados, enquanto entende-se ser melhor separá-los.