Los eventos del ratón en jQuery

 click y dbclick

Una de las enormes ventajas que tenemos con jQuery son los eventos. Dos de ellos, que funcionan a la perfección, son el click y el doble click, que lo podemos aplicar a cualquier elemento del documento, como puede ser una imagen, un párrafo o una tabla.

 mouseenter y mouseleave

Otros eventos que son muy utilizados en las animaciones y efectos que podemos realizar con jQuery son mouseenter y mouseleave, que nos permiten realizar efectos "rollover" y "rollout". Estos efectos los podemos aplicar tanto en imágenes, textos y otros elementos del documento.

mousedown y mouseover 

Los eventos mousedown y mouseover nos permitirán detectar cuando el apuntador del ratón izquierdo está abajo o cuando arriba. Con ellos podremos hacer muchos efectos interesantes, ya que los podemos aplicar a cualquier elemento de la página.

hover

El método hover() toma dos funciones tipo callback y es la combinación de los métodos mouseenter() y mouseleave().

La primer función se ejecuta cuando el apuntador del ratón entra al elemento HTML y la segunda función se activa cuando el apuntador del ratón sale del elemento.

$("#p1").hover(function(){
  alert("You entered p1!");
  },
  function(){
  alert("Bye! You now leave p1!");
});

focus()

El evento focus() se dispara cuando el apuntador del ratón entra a una caja de un formulario HTML. La función se ejecuta cuando tenemos el "foco" sobre el campo:

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur()

El evento blur() se dispara cuando el apuntador del ratón sale de una caja de un formulario HTML. La función se ejecuta cuando perdemos el "foco" sobre el campo:

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

keydown()

El evento keydown() se dispara cuando pulsamos una tecla dentro de una caja de un formulario HTML.

$("input").keydown(function(){
  $("input").css("background-color","yellow");
});

keyup()

El evento keyup() se dispara cuando levantamos la tecla de una caja de un formulario HTML.

$("input").keydown(function(){
  $("input").css("background-color","#ffffff");
});