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