Métodos de Evento do jQuery

Os eventos são operações que o aplicativo web pode detectar.

A jQuery fornece uma maneira simples de adicionar manipuladores de eventos para a seleção.

A função fornecida será executada quando o evento ocorrer.

A seguir estão exemplos de eventos:

• Carregamento da página da web

• Clique em um elemento

• Mover o mouse sobre o elemento

• Enviar HTML de tabela

• Teclas na tecla

Sintaxe do método de evento jQuery

Na jQuery, a maioria dos eventos DOM tem métodos jQuery equivalentes.

Para atribuir o evento de clique a todos os parágrafos na página, execute a seguinte operação:

$("p").click();

O próximo passo é definir o que deve acontecer quando o evento ocorrer. Você deve passar uma função para o evento:

$("p").click(function(){
　　//　Ação a ser executada...
　　});

Este exemplo oculta um parágrafo na página ao clicar na página:

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

Este exemplo adiciona uma função "changeSize" ao evento de clique:

$(document).ready(function() {
　　$("p").click(changeSize);
});
function changeSize() {
　　$(this).animate({fontSize: "+=5px"});
}

Métodos de evento jQuery comuns

$（document）.ready()

jQuery $(document).ready()O método especifica a função a ser executada quando o DOM estiver completamente carregado.

A seguinte exemplo exibe uma mensagem ao carregar o DOM:

$(document).ready(function() {
　　$("p").text("Agora o DOM foi carregado, é possível operá-lo.");
});

click()

jQuery click()O método adiciona a função manipuladora de eventos ao elemento selecionado.

Quando o usuário clicar no elemento, a função será executada:

$("p").click(function(){
　　$("this").css({"background-color":"#007FFF", "color":"white"});
});

mouseenter()

jQuery mouseenter()O método adiciona a função manipuladora de eventos ao elemento selecionado.

Quando o ponteiro do mouse entrar no elemento, a função será executada:

$("p").mouseenter(function(){
　　$("this").css("background-color", "yellow");
});

mouseleave()

jQuery mouseleave()O método adiciona a função manipuladora de eventos ao elemento selecionado.

Quando o ponteiro do mouse sair do elemento, a função será executada:

$("p").mouseleave(function(){
　　$("this").css("background-color", "lightblue");
});

mousedown()

jQuery mousedown()O método adiciona a função manipuladora de eventos ao elemento selecionado.

Quando o usuário pressionar o botão do mouse no elemento, a função será executada:

$("p").mousedown(function(){
　　$("this").after("<p style='color:red;'>pressiona o botão do mouse</p>");
});

mouseup()

jQuery mouseup()O método adiciona a função manipuladora de eventos ao elemento selecionado.

Quando o botão do mouse for solto sobre o elemento, a função será executada:

$("p").mouseup(function(){
　　$("this").after("<p style='color:green;'>solta a tecla</p>");
});

keydown()

jQuery keydown()O método adiciona a função manipuladora de eventos ao elemento selecionado.

Quando o usuário pressionar uma tecla no teclado, a função será executada:

$("input").keydown(function(event){
　　$("this").css("background-color", "yellow");
　　$("span").text(event.type);
});

keyup()

jQuery keyup()O método adiciona a função manipuladora de eventos ao elemento selecionado.

Quando o usuário soltar uma tecla na teclado, a função será executada:

$("input").keyup(function(event){
　　$("this").css("background-color", "lightblue");
　　$("span").text(event.type);
});

hover（）

jQuery hover()os métodos têm duas funções e sãomouseenter()emouseleave()combinações de métodos.

O exemplo a seguir altera a cor de fundo ao passar o ponteiro do mouse por cima de todos<p>a cor de fundo do elemento:

$("p").hover(function(){
　　$("this").css("background-color", "yellow");
　　}, function(){
　　$("this").css("background-color", "lightblue");
});

método on()

jQuery oferecemétodoum método para responder a qualquer evento no elemento selecionado.

usandométodométodos, podemos adicionar um ou mais manipuladores de eventos ao elemento selecionado.

A exemplo a seguir adiciona o evento click a todos<p>Elemento:

$("p").on("click", function(){
　　$("this").css("background-cor", "coral");
});

O exemplo a seguir adiciona o evento mouseenter a todos<p>Elemento:

$("p").on("mouseenter", function(){
　　$("this").css("background-cor", "coral");
});

O exemplo a seguir adiciona múltiplos manipuladores de eventos a<div>Elemento:

$("div").on("mouseenter mouseleave click", function(){
　　$("this").text(Math.random());
});

método off()

jQuery off() 　método removemétodométodo para adicionar um ou mais manipuladores de eventos.

O exemplo a seguir utiliza<div>Remover o evento mousemove do elemento:

$("button").click(function(){
　　$("div").off("mousemove");
});

Objeto de evento

O sistema de eventos do jQuery é baseado no W3Padronização do objeto de evento pelo padrão C.

Certifique-se de passar o objeto de evento para o manipulador de eventos.

Cada função de manipulador de evento recebe um objeto de evento, que contém muitos atributos e métodos.

$("div").on("click", function(event){
　　alert("O tipo do evento é "　+　event.type);
　　alert("Target: "　+　event.target.innerHTML);
});

A tabela a seguir mostra todos os métodos e atributos dos objetos de evento:

Manual de Referência de Eventos do jQuery

Para referência completa de eventos, acesse nossoManual de Referência dos Eventos do jQuery.