Eventos en jQuery: Introducción y los eventos de ratón

jQuery

Eventos de jQuery

Los navegadores están programados para reconocer acciones básicas como carga de una página, el movimiento de un ratón, la pulsación de una tecla o la redimensión de una ventana. Cada uno de esos momentos que sucede en una página es considerado un evento. De esta manera se podría hacer que un div desaparezca según cliquemos un enlace u ocultemos un formulario cuando el usuario ha enviado los datos.

Un evento representa el momento preciso cuando algo pasa. De está manera cuando se mueve el ratón el navegador indica que ha sucedido un evento y ejecutamos un código que hemos creado previamente para ese evento en especial. En este post me centraré en los eventos de ratón.

click

El evento click se «dispara» después de hacer click y soltar el botón del ratón, el click de toda la vida. Normalmente se asigna mucho para agrandar una imagen cuando clicamos sobre ella. Este evento no está sujeto sólo a vínculos, puede asociarse a cualquier elemento de la página

JavaScript
1
2
3
4
$("elemento").click(function()
{
  //código
});

dbclick

Este evento reacciona cuando se realiza un doble click similar cuando abres un fichero. Al no ser un evento usual, deberías de avisar a los visitantes que hagan doble-click donde quieras que pase el evento. Tienes que tener en cuenta que este evento dispararía 2 eventos click, por tanto, no asignes click y dbclick sobre un mismo elemento. De la otra forma, la función para el click se ejecutaría 2 veces antes de que el dbclick funcione.

JavaScript
1
2
3
4
$("elemento").dbclick(function()
{
   //código
});

mousedown

Sería la primera mitad de un evento click, cuando mantienes el botón pulsado antes de soltarlo. Es muy útil cuando arrastras elementos por a página.

JavaScript
1
2
3
4
$("elemento").mousedown(function()
{
   //código
});

mouseup

La segunda mitad del click, al soltar el botón. Respondería al momento en que el usuario suelta el elemento que ha estado sujetando.

JavaScript
1
2
3
4
$("elemento").mouseup(function()
{
   //código
});

mouseover

Cuando mueves el ratón sobre un elemento de una página. Puedes assignar este evento a un botón de navegación como lo harías con la pseudo-clase :hover de CSS.

JavaScript
1
2
3
4
$("elemento").mouseover(function()
{
   //código
});

mouseout

Al mover un elemento fuera de un elemento se dispararía este evento. Puedes usarlo cuando un usuario mueve el ratón fuera de una ventana emergente para que se cierre.

JavaScript
1
2
3
4
$("elemento").mouseout(function()
{
   //código
});

mousemove

Cada vez que el ratón se mueve se dispara el evento, prácticamente todo el tiempo. Se usa normalmente para seguir la posición del cursor en la pantalla. También puedes asignarlo a un elemento particular de la página y se dispare cuando mueva el ratón sobre ese elemento.

JavaScript
1
2
3
4
$("elemento").mousemove(function()
{
   //código
});

Y hasta aquí los diferentes eventos de ratón en Jquery. Buen finde 🙂