Eventos del mouse en JQuery

jquery

jquery

Si eres programador de la vieja o nueva escuela, sabrás lo importante que es el uso de los eventos, como también la posibilidad de controlarlos, con el fin de obtener las funcionalidades que deseamos para brindar una mejor experiencia de usuario, como es de saberse en JQuery también podemos hacer uso de eventos, veamos una serie de ellos que nos pueden ser de mucha utilidad al memento de programar sitios y paginas Web veamos:

Eventos del Mouse

Evento click: Este evento hace referencia a la acción de hacer click sobre un elemento de la pagina, puede ser un boton, un link, un parrafo, una imagen, todos los elementos que contengan componente visual podremos establecer un evento click Ejemplo:

1
2
3
4
5
6
7
<button id="enviar">Enviar</button>

<script type="text/javascript">
$("#enviar").click(function(){
alert("Hiciste click");
});
</script>

Evento doble click: Este se desencadena cuando el usuario realiza dos click’s de manera consecutiva encima de un componente, utilicemos un parrafo:

1
2
3
4
5
6
7
<p id="parrafo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sit illum cumque velit blanditiis, distinctio! Fugiat aspernatur officia maiores dolor esse corporis unde delectus blanditiis ex voluptatibus, temporibus expedita totam!</p>

<script type="text/javascript">
$("#parrafo").dblclick(function(){
alert("Hiciste doble click en el parrafo");
});
</script>

Evento Ingreso del Mouse: Este evento se desencadena cuando el mouse entra al área del componente, o como normal mente se dice “pasa por encima”.

1
2
3
4
5
6
7
<img id="imagen" src="imagen.png" alt=""/>

<script type="text/javascript">
$("#imagen").mouseenter(function(){
alert("Pasaste el mouse por encima de la imagen");
});
</script>

En el ejemplo anterior veremos como salta un mensaje al pasar el mouse por encima de la imagen.

Evento Salida del Mouse: A diferencia del evento anterior que se ejecuta al momento del ingreso del mouse, este se desencadena cuando el mouse sale del componente, veamos el ejemplo con una imagen:

1
2
3
4
5
6
7
<img id="imagen" src="imagen.png" alt=""/>

<script type="text/javascript">
$("#imagen").mouseleave(function(){
alert("El mouse ha salido de la imagen");
});
</script>

En un próximo artículo estaremos estudiando los eventos del teclado.

Hasta pronto!.

Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *