Quando usas o teu browser, ele regista vários tipos de eventos: um clique num botão, o envio de um formulário, o rato a passar por cima de um elemento. É a forma de o browser te dizer que o utilizador acabou de fazer alguma coisa. O teu script pode então responder a esses eventos. Muitas vezes, essa resposta consiste em atualizar o conteúdo da página através do objeto document, o que a torna mais interativa. Neste capítulo, ficas com a lista dos vários tipos de evento com que podes trabalhar para tornar as tuas páginas um pouco mais interativas.
Este artigo não está completo e pode vir a ser atualizado
Atribuir uma função a um evento
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world');
}
bouton.onclick = MonAlert;Todos os browsers modernos entendem esta forma de atribuir uma função a um evento, mas só podes ligar uma função a cada evento e não lhe podes passar parâmetros. De facto, somos obrigados a tirar os parênteses para que o código não seja executado de imediato.
Inconveniente
Quando queres atribuir várias funções a um evento, a função anterior é substituída pela nova.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!')
}
bouton.onclick = MonAlert;
bouton.onclick = AlertTOTO;Resultado: ficamos com a mensagem Toto!.
Event Listener
Os event listeners são um método mais moderno, que permite atribuir várias funções ao mesmo evento.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!');
}
bouton.addEventListener('click', MonAlert);
bouton.addEventListener('click', AlertTOTO);O método addEventlistener() recebe três parâmetros:
element.addEventlistener('evenement', NomDeFonction, Boolean);
- evenement: o nome do evento que queres escutar ( blur, click, … );
- O código que quiseres: pode ser uma função que declaraste ou uma função anónima.
- Um
booleanque indica a propagação dos eventos, por omissão, este valor é false.
Inconveniente
Este método não é suportado pelos browsers antigos.
Usar parâmetros
Vimos que não podemos pôr parênteses nas nossas funções quando as queremos atribuir a um evento. Para o conseguir, criamos uma função anónima que atribuímos ao evento e é dentro dela que chamamos as nossas funções com os parâmetros.
function MonAlert(message) {
alert(message);
}
bouton.addEventListener('click', function() {
MonAlert('Mon message qui s'affiche!');
});O objeto Event
Quando um evento acontece, existe um objeto de evento que contém informação sobre o evento e sobre o elemento em que ele ocorreu.
var bouton = document.getElementById('click');
function MonAlert(e) {
console.log(e.target);
}
bouton.onclick = MonAlert;Com um event listener e parâmetros
var bouton = document.getElementById('click');
function MonAlert(e, message) {
console.log(e.target);
console.log(message);
}
bouton.addEventListener('click', function(e){
MonAlert(e, "hello world!");
});Propriedade
| Propriedade | Descrição |
|---|---|
target | O elemento que desencadeou o evento |
type | O evento que foi desencadeado |
Método
| Método | Descrição |
|---|---|
preventDefault() | Cancela o comportamento por omissão de um evento (se puder ser cancelado) |
stopPropagation() | Para a propagação do evento. |
Lista dos eventos
Fica aqui uma pequena lista, não exaustiva, dos eventos que aparecem com regularidade.
Browser
| Evento | Descrição |
|---|---|
load | Dispara quando o browser acaba de carregar. Também pode disparar nos nós de outros elementos carregados, como imagens, scripts ou objetos. |
unload | é o inverso do evento load: dispara quando se muda de página. |
resize | dispara quando o utilizador muda o tamanho da janela do browser. |
scroll | dispara quando o utilizador faz scroll na página ou num elemento. |
error | error dispara quando o browser encontra um erro de JavaScript. |
Rato
| Evento | Descrição |
|---|---|
click | Dispara quando o utilizador clica num elemento |
dblclick | Igual ao click, mas quando o utilizador faz um duplo clique rápido. |
mouseup | Dispara quando o utilizador mantém premido um botão do rato. |
mousedown | Dispara quando o utilizador larga um botão do rato. |
mousemove | Dispara quando o cursor se desloca. |
mouseover | dispara quando o cursor passa por cima de um elemento. |
mouseout | dispara quando o cursor sai de um elemento sobre o qual estava, ou entra num elemento filho desse. |
Teclado
| Evento | Descrição |
|---|---|
input | Dispara quando o valor de um elemento <input> ou <textarea> muda. |
keydown | Dispara quando o utilizador carrega numa tecla do teclado. Se mantiver a tecla premida, o evento continua a disparar repetidamente. |
keypress | Dispara quando o utilizador carrega numa tecla que faria aparecer um caractere no ecrã. Por exemplo, este evento não dispara com as teclas de seta, ao passo que o keydown dispara. Se o utilizador mantiver a tecla premida, o evento continua a disparar repetidamente, tal como no keydown. |
keyup | Dispara quando o utilizador larga uma tecla do teclado. Os eventos keydown e keypress disparam antes de o caractere aparecer no ecrã, enquanto o keyup dispara depois de ele aparecer. |
Saber que tecla foi premida
Com o objeto Event podes saber que tecla foi premida através de e.keycode, que devolve o código ASCII da tecla do teclado.
Formulário
| Evento | Descrição |
|---|---|
submit | Dispara quando o utilizador carrega no botão de validação do formulário. |
change | Dispara quando o estado de vários elementos de formulário muda. ( radio, checkbox e select ) |
