Métodos de eventos de jQuery

Los eventos son operaciones que las aplicaciones web pueden detectar.

jQuery proporciona métodos simples para adjuntar gestores de eventos a las selecciones.

Se ejecutará la función proporcionada cuando ocurra el evento.

Aquí hay algunos ejemplos de eventos:

• Carga de la página web

• Hacer clic en un elemento

• Mover el ratón sobre un elemento

• Enviar un formulario HTML

• Teclas en el teclado, etc.

Sintaxis de métodos de eventos jQuery

En jQuery, la mayoría de los eventos DOM tienen métodos jQuery equivalentes.

Para asignar el evento de clic a todos los párrafos en la página, realice lo siguiente:

$("p").click();

El siguiente paso es definir lo que debe ocurrir cuando ocurre el evento. Debe pasar una función al evento:

$("p").click(function(){
　　//　Acciones a realizar...
　　});

Este ejemplo oculta un párrafo en la página al hacer clic en la página:

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

Este ejemplo adjunta una función "changeSize" al evento click:

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

Métodos de eventos jQuery comunes

$（document）.ready()

jQuery $(document).ready()El método especifica la función que se debe ejecutar cuando el DOM esté completamente cargado.

La siguiente muestra muestra un mensaje al cargar el DOM:

$(document).ready(function() {
　　$("p").text("Ahora el DOM está cargado, puede operarlo.");
});

click()

jQuery click()El método adjunta una función gestora de eventos al elemento seleccionado.

Al hacer clic en este elemento, se ejecutará esta función:

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

mouseenter()

jQuery mouseenter()El método adjunta una función gestora de eventos al elemento seleccionado.

Al entrar el puntero del ratón en este elemento, se ejecutará esta función:

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

mouseleave()

jQuery mouseleave()El método adjunta una función gestora de eventos al elemento seleccionado.

Al salir el puntero del ratón de este elemento, se ejecutará esta función:

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

mousedown()

jQuery mousedown()El método adjunta una función gestora de eventos al elemento seleccionado.

Al presionar el botón del ratón en este elemento, se ejecutará esta función:

$("p").mousedown(function(){
　　$(this).after("<p style='color:red;'>Presionar tecla</p>");
});

mouseup()

jQuery mouseup()El método adjunta una función gestora de eventos al elemento seleccionado.

Al soltar el botón del ratón en este elemento, se ejecutará esta función:

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

keydown()

jQuery keydown()El método adjunta una función gestora de eventos al elemento seleccionado.

Al presionar una tecla en el teclado, se ejecutará esta función:

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

keyup()

jQuery keyup()El método adjunta una función gestora de eventos al elemento seleccionado.

Al soltar una tecla en el teclado, se ejecutará esta función:

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

hover（）

jQuery hover()los métodos tienen dos funciones y sonmouseenter()ymouseleave()la combinación de métodos.

El siguiente ejemplo cambia el color de fondo de todos<p>el color de fondo del elemento:

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

el método on()

jQuery proporcionamétodoun método para responder a cualquier evento en el elemento seleccionado.

usandométodométodos, podemos adjuntar un o más gestores de eventos al elemento seleccionado.

El siguiente ejemplo adjunta el evento click a todos<p>Elemento:

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

El siguiente ejemplo adjunta el evento mouseenter a todos<p>Elemento:

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

El siguiente ejemplo adjunta varios programas de eventos a<div>Elemento:

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

método off()

jQuery método 　método elimina elmétodométodo con uno o más programas de eventos asociados.

El siguiente ejemplo procede de<div>Eliminar el evento mousemove del elemento:

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

Objeto de eventos

El sistema de eventos de jQuery se basa en el W3Estandarización del objeto de eventos según el estándar C.

Asegúrate de pasar el objeto de eventos al programa de eventos.

Cada función de manejo de eventos recibe un objeto de eventos que contiene muchas propiedades y métodos.

$("div").on("click", function(event){
　　alert("El tipo de evento es "　+　event.type);
　　alert("Target: "　+　event.target.innerHTML);
});

La siguiente tabla muestra todos los métodos y atributos del objeto de eventos:

Manual de referencia de eventos de jQuery

Para obtener una referencia completa de eventos, por favor visite nuestroManual de referencia de jQuery Events。