Eventos JQuery
Eventos en JQuery
JQuery dispone de un conjunto de métodos que permiten realizar eventos. Un evento es una acción que puede ser provocada y detectada y que puede tener origen desde el navegador o desde del usuario. Los eventos pueden ser pulsar un botón, arrastrar una imagen, presionar una tecla o conectar un dispositivo. Los ejemplos siguientes muestran algunos de los eventos más utilizados.
MOUSEOVER Y MOUSEOUT
Mouseover detecta el cursor del ratón pasar sobre un elemento mientras que mouseout detecta la salida del cursor de un elemento.
<div id="contenedor">La ventana cambia de color</div><script>$(document).ready(function(){var caja = $("#contenedor");caja.mouseover(function(){$(this).css("background","red");});caja.mouseout(function(){$(this).css("background","yellow");});});</script>
HOVER
El evento hover maneja la detección sobre el elemento y la salida del elemento volviendo al estado original,
<div id="contenedor">La ventana cambia de borde</div><script>$(document).ready(function(){var caja = $("#contenedor");function borde1(){$(this).css("border","orange 5px solid");};function borde2(){$(this).css("border","blue 5px dashed");};caja.hover(borde1,borde2);});</script>
<div id="contenedor">La ventana cambia de sombra</div><script>$(document).ready(function(){var caja = $("#contenedor");caja.click(function(){$(this).css("box-shadow","15px 10px 10px blue");});caja.dblclick(function(){$(this).css("box-shadow","10px 10px 5px pink");});});</script>
FOCUS Y BLUR
El evento focus detecta el foco sobre un elemento mientras que blur detecta el cambio de foco.
<form><input type="text" id="usuario"></form><script>$(document).ready(function(){$("#usuario").focus(function(){$(this).attr("placeholder","Has entrado en el foco");});$("#usuario").blur(function(){$(this).attr("placeholder","Has salido del foco");});});</script>
MOUSEMOVE
El evento mousemove se activa al detectar un movimiento del ratón.
<script>$(document).ready(function(){$(document).mousemove(function(e){console.log("ClientX: " + e.clientX);console.log("ClientY: " + e.clientY);});});</script>
Se pueden revisar todos los eventos de JQuery desde la documentación oficial Lista de eventos de JQuery
Para poder comentar es necesario iniciar sesión