Métodos de evento jQuery
jQuery é feito sob medida para responder a eventos em uma página HTML.
O que são Eventos?
Todas as diferentes ações dos visitantes às quais uma página da web pode responder são chamadas de eventos.
Um evento representa o momento preciso em que algo acontece.
Exemplos:
- movendo o mouse sobre um elemento
- selecionando um botão de rádio
- clicando em um elemento
O termo "incêndios/despedidos" é frequentemente usado com eventos. Exemplo: "O evento keypress é acionado no momento em que você pressiona uma tecla".
Aqui estão alguns eventos 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 jQuery para métodos de evento
Em jQuery, a maioria dos eventos DOM tem um método jQuery equivalente.
Para atribuir um evento de clique a todos os parágrafos de uma página, você pode fazer o seguinte:
$("p").click();
A próxima etapa é definir o que deve acontecer quando o evento for acionado. Você deve passar uma função para o evento:
$("p").click(function(){
// action goes here!!
});
Métodos de evento jQuery comumente usados
$(document).pronto()
O $(document).ready()método nos permite executar uma função quando o documento está totalmente carregado. Este evento já está explicado no
capítulo Sintaxe do jQuery .
clique()
O click()método anexa uma função de manipulador de eventos a um elemento HTML.
A função é executada quando o usuário clica no elemento HTML.
O exemplo a seguir diz: Quando um evento de clique é acionado em um <p>elemento; ocultar o <p>elemento atual:
Exemplo
$("p").click(function(){
$(this).hide();
});
dblclick()
O dblclick()método anexa uma função de manipulador de eventos a um elemento HTML.
A função é executada quando o usuário clica duas vezes no elemento HTML:
Exemplo
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
O mouseenter()método anexa uma função de manipulador de eventos a um elemento HTML.
A função é executada quando o ponteiro do mouse entra no elemento HTML:
Exemplo
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mouseleave()
O mouseleave()método anexa uma função de manipulador de eventos a um elemento HTML.
A função é executada quando o ponteiro do mouse sai do elemento HTML:
Exemplo
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
mousedown()
O mousedown()método anexa uma função de manipulador de eventos a um elemento HTML.
A função é executada, quando o botão esquerdo, do meio ou direito do mouse é pressionado, enquanto o mouse está sobre o elemento HTML:
Exemplo
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
mouseup()
O mouseup()método anexa uma função de manipulador de eventos a um elemento HTML.
A função é executada, quando o botão esquerdo, do meio ou direito do mouse é liberado, enquanto o mouse está sobre o elemento HTML:
Exemplo
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
flutuar()
O hover()método usa duas funções e é uma combinação dos
métodos mouseenter()e .mouseleave()
A primeira função é executada quando o mouse entra no elemento HTML e a segunda função é executada quando o mouse sai do elemento HTML:
Exemplo
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
foco()
O focus()método anexa uma função de manipulador de eventos a um campo de formulário HTML.
A função é executada quando o campo do formulário recebe o foco:
Exemplo
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
borrão()
O blur()método anexa uma função de manipulador de eventos a um campo de formulário HTML.
A função é executada quando o campo do formulário perde o foco:
Exemplo
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
O método on()
O on()método anexa um ou mais manipuladores de eventos para os elementos selecionados.
Anexe um evento de clique a um <p>elemento:
Exemplo
$("p").on("click", function(){
$(this).hide();
});
Anexe vários manipuladores de eventos a um <p>elemento:
Exemplo
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
Exercícios de jQuery
Métodos de evento jQuery
Para uma referência completa de eventos jQuery, acesse nossa Referência de Eventos jQuery .