Eventos

Um evento representa o exato momento em que algo acontece, normalmente devido a uma ação do utilizador.
Exemplos:

• mover o mouse sobre um elemento
• seleccionando um botão de rádio
• clicar em um elemento
  

Aqui estão alguns eventos mais comuns do DOM:

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

Sintaxe da captura de eventos

$(selector).evento();

Exemplo:

$("p").click();

Se quisermos fazer algo quando um evento ocorre devemos fazê-lo através de uma função de callback:

$("p").click(function(){ 
    // tratamento do evento aqui
});

Eventos mais comuns

$(document).ready()

O evento $(document).ready() permite-nos executar uma função quando a página está totalmente carregada.

Exemplo:

$(document).ready(function(){ 
   $("p").hide(); 
}); 

click ()

O evento click() atribui uma função tratadora do evento click aos elementos de HTML definidos no seletor. A função é executada quando o utilizador clica num dos elementos de HTML.

Exemplo:

Quando o utilizador clica num elemento <p> , esconde o elemento com o id “#content”:

$("p").click(function(){ 
   $("#content").hide(); 
}); 

dblclick()

O evento dblclick() atribui uma função tratadora do evento dblclick aos elementos de HTML definidos no seletor.

A função é executada quando o utilizador clica duas vezes num elemento de HTML.

Exemplo :

$("p").dblclick(function(){ 
   $("#content").hide(); 
}); 

mouseenter()

O evento mouseenter() atribui uma função tratadora do evento mouseenter aos elementos de HTML definidos no seletor.

A função é executada quando o ponteiro do rato entra no elemento de HTML, referido no seletor:

Exemplo :

$("#p1").mouseenter(function(){ 
   alert("You entered p1!"); 
});

mouseleave()

O evento mouseleave() atribui uma função tratadora do evento mouseleave aos elementos de HTML definidos no seletor.

A função é executada quando o ponteiro do rato deixa o elemento HTML, referido no seletor.

Exemplo :

$("#p1").mouseleave(function(){ 
   alert("Bye! You now leave p1!"); 
}); 

mousedown()

O método mousedown() atribui uma função tratadora do evento mousedown aos elementos de HTML definidos no seletor.

A função é executada quando o botão esquerdo do rato é pressionado para baixo, enquanto o rato está sobre o elemento HTML, referido no seletor.

Exemplo :

$("#p1").mousedown(function(){ 
   alert("Mouse down over p1!"); 
}); 

mouseup()

O método mouseup() atribui uma função tratadora do evento mouseup aos elementos de HTML definidos no seletor.

A função é executada quando o botão esquerdo do rato é libertado, enquanto o rato está sobre o elemento HTML, referido no seletor.

Exemplo :

$("#p1").mouseup(function(){ 
   alert("Mouse up over p1!"); 
}); 

focus()

O método focus() atribui uma função tratadora do evento focus aos elementos de HTML definidos no seletor.

A função é executada quando o elemento de HTML, referido no seletor, recebe o foco.

Exemplo :

$("input").focus(function(){ 
   $(input).css("background-color","#cccccc"); 
});