Ejemplos del uso de eventos con jquery en español

Ejemplos del uso de eventos con jquery en español

Ejemplos del uso de eventos con jquery en español

los eventos son la respuesta a las diferentes acciones que puede realizar un visitante en nuestra página web es decir cuando mueve el cursor o ratón por encima de un elemento o cuando selecciona algo de un formulario o cuando hace  click a un elemento, todas estas acciones son lo que llamamos eventos

el término fired o disparar es normalmente usado con eventos, como por ejemplo cuando presionamos una tecla del teclado se dispara el evento keyPress

la sintaxis básica del evento es indicar primero el selector o a quién queremos asociar un evento y después qué evento queremos asociarle como puedes ver en el siguiente código se asigna el evento Click a la etiqueta p de párrafo

$("p").click(function(){
  // acción que queremos ejecutar!!
});

Vamos a ver otros eventos útiles ….

$(document).ready()

el evento ready del documento se suele utilizar para crear todas las funciones o definición de funciones que queremos que se carguen cuando la carga de la página a finalizado asegurándonos así que se asignan bien a todos los elementos

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

el evento Click se dispara cuando hacemos clic con el ratón en el elemento indicado en el selector en este caso la P de párrafo.

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

el evento doble click se dispara cuando hacemos dos clicks con el ratón en el elemento indicado

$("#p1").mouseenter(function(){
    alert("Entras en p1!");
});

el evento MouseEnter se dispara cuando situamos el puntero ratón encima del elemento

$("#p1").mouseenter(function(){
    alert("Sales de p1!");
});

el evento MouseLeave se ejecuta cuando sacamos el puntero o ratón de un elemento es decir lo contrario que la anterior

$("#p1").hover(function(){
    alert("Entras en p1!");
},
function(){
    alert("Sales de p1!");
});

el evento hover utiliza dos funciones y es una combinación del evento MouseEnter MouseLeave la primera función se ejecuta cuando entramos en el elemento y la segunda cuando salimos
como puedes ver la sintaxis es la misma para todos lo único que tienes que hacer es indicar a quién le quieres asociar el evento y en la función la acción que quieres realizar sobre este elemento cuando se dispare elemento definido

estos no son los únicos eventos de los que disponemos en jQuery si quieres ver un listado de todos los eventos aquí te dejo un enlace