jQuery é feito sob medida para responder a eventos em uma página HTML.
Quais são eventos?
Todas as ações do diferente do visitante que uma página web pode responder a são chamados eventos.
Um evento representa o exato momento em que algo acontece.
Exemplos:
- movendo a seta do mouse sobre um elemento
- seleccionando um botão de rádio
- clicar em um elemento
O termo "fires/fired" é usado frequentemente com eventos. Exemplo: "O keypress evento é disparado, o momento em que você pressionar uma tecla".
Aqui estão alguns eventos DOM comuns:
| eventos de rato | Eventos de teclado | Eventos de formulário | Eventos documento / janela |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
jQuery sintaxe para métodos de eventos
Em jQuery, a maioria dos eventos DOM tem um método jQuery equivalente.
Para atribuir um evento de clique a todos os parágrafos em uma página, você pode fazer isso:
$("p").click();
O próximo passo é definir o que deve acontecer quando o evento é acionado. Você deve passar uma função para o evento:
$("p").click(function(){
// action goes here!!
});
Comumente utilizados métodos de Eventos jQuery
$(document).ready()
O $(document).ready() método nos permite executar uma função quando o documento está totalmente carregada. Este evento já está explicado na jQuery Sintaxe capítulo.
click()
O click() método atribui 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 clique evento é acionado em um <p> elemento; esconder a corrente <p> elemento:
dblclick()
O dblclick() método atribui uma função de manipulador de eventos a um elemento HTML.
A função é executada quando o usuário clica duas vezes sobre o elemento HTML:
mouseenter()
O mouseenter() método atribui uma função de manipulador de eventos a um elemento HTML.
A função é executada quando o ponteiro do mouse entra o elemento HTML:
mouseleave()
O mouseleave() método atribui uma função de manipulador de eventos a um elemento HTML.
A função é executada quando o ponteiro do mouse deixa o elemento HTML:
mousedown()
O mousedown() método atribui uma função de manipulador de eventos a um elemento HTML.
A função é executada, quando a esquerda, botão do meio ou direito do mouse é pressionado para baixo, enquanto o mouse está sobre o elemento HTML:
mouseup()
O mouseup() método atribui uma função de manipulador de eventos a um elemento HTML.
A função é executada, quando o deixou, botão do meio ou direito do mouse é liberado, enquanto o mouse está sobre o elemento HTML:
hover()
O hover() método tem duas funções e é uma combinação do mouseenter() e mouseleave() métodos.
A primeira função é executada quando o mouse entra o elemento HTML, e a segunda função é executada quando o mouse deixa o elemento HTML:
Exemplo
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
Tente você mesmo " focus()
O focus() método atribui uma função de manipulador de eventos a um campo de formulário HTML.
A função é executada quando o campo de formulário obtém o foco:
Exemplo
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
Tente você mesmo " blur()
O blur() método atribui uma função de manipulador de eventos a um campo de formulário HTML.
A função é executada quando o campo de formulário perde o foco:
Exemplo
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
Tente você mesmo " O on() Método
O on() método atribui um ou mais manipuladores de eventos para os elementos selecionados.
Anexar um evento de clique a um <p> elemento:
Anexar vários manipuladores de eventos a um elemento <p>:
Exemplo
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color",
"yellow");
}
}); Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »
Métodos de Eventos jQuery
Para uma referência completa de eventos jQuery, por favor, vá ao nosso jQuery Eventos de Referência .