jQuery está hecha a medida para responder a eventos en una página HTML.
¿Cuáles son eventos?
Todas las acciones de los diferentes visitantes que una página web puede responder a eventos se llaman.
Un evento representa el momento preciso en que algo sucede.
Ejemplos:
- mover el ratón sobre un elemento
- seleccionar un botón de opción
- al hacer clic en un elemento
El término "fires/fired" se utiliza a menudo con los eventos. Ejemplo: "La keypress evento se activa, el momento en que se pulsa una tecla".
Aquí hay algunos eventos DOM comunes:
| Eventos del ratón | Eventos de teclado | Eventos de formulario | Documento / ventana Eventos |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
jQuery sintaxis Para Métodos de Evento
En jQuery, la mayoría de los eventos DOM tienen un método jQuery equivalente.
Para asignar un evento de clic a todos los párrafos en una página, usted puede hacer esto:
$("p").click();
El siguiente paso es definir lo que debe ocurrir cuando se activa el evento. Debe pasar una función para el evento:
$("p").click(function(){
// action goes here!!
});
Comúnmente utilizado métodos de eventos de jQuery
$(document).ready()
El $(document).ready() método nos permite ejecutar una función cuando el documento se ha cargado completamente. Este evento ya se explicó en el jQuery Sintaxis capítulo.
click()
El click() método atribuye una función de controlador de eventos para un elemento HTML.
La función se ejecuta cuando el usuario hace clic en el elemento HTML.
El siguiente ejemplo se dice: Cuando un evento de clic incendios en un <p> elemento; ocultar la corriente <p> elemento:
dblclick()
El dblclick() método atribuye una función de controlador de eventos para un elemento HTML.
La función se ejecuta cuando el usuario hace doble clic en el elemento HTML:
mouseenter()
El mouseenter() método atribuye una función de controlador de eventos para un elemento HTML.
La función se ejecuta cuando el puntero del ratón entra en el elemento HTML:
mouseleave()
El mouseleave() método atribuye una función de controlador de eventos para un elemento HTML.
La función se ejecuta cuando el puntero del ratón sale del elemento HTML:
mousedown()
El mousedown() método atribuye una función de controlador de eventos para un elemento HTML.
La función se ejecuta, cuando el botón central o derecho del ratón izquierdo, se presiona hacia abajo, mientras que el ratón está sobre el elemento HTML:
mouseup()
El mouseup() método atribuye una función de controlador de eventos para un elemento HTML.
La función se ejecuta, cuando la izquierda, el botón central o derecho del ratón es liberado, mientras que el ratón está sobre el elemento HTML:
hover()
El hover() método tiene dos funciones y es una combinación de la mouseenter() y mouseleave() métodos.
La primera función se ejecuta cuando el ratón entra en el elemento HTML, y se ejecuta la segunda función cuando el ratón sale del elemento HTML:
Ejemplo
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
Inténtalo tú mismo " focus()
El focus() método atribuye una función de controlador de eventos a un campo de formulario HTML.
La función se ejecuta cuando el campo de formulario se centrará:
Ejemplo
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
Inténtalo tú mismo " blur()
La blur() método atribuye una función de controlador de eventos a un campo de formulario HTML.
La función se ejecuta cuando el campo de formulario pierde el foco:
Ejemplo
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
Inténtalo tú mismo " La on() Método
La on() método se conecta uno o más controladores de eventos para los elementos seleccionados.
Adjuntar un evento de clic a un <p> elemento:
Adjuntar varios controladores de eventos a un elemento <p>:
Ejemplo
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color",
"yellow");
}
}); Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »
Métodos de Evento jQuery
Para una referencia completa de eventos de jQuery, por favor vaya a nuestra eventos de referencia de jQuery .