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.

  1. <div id="contenedor">
  2. La ventana cambia de color
  3. </div>
  4. <script>
  5. $(document).ready(function(){
  6. var caja = $("#contenedor");
  7. caja.mouseover(function(){
  8. $(this).css("background","red");
  9. });
  10. caja.mouseout(function(){
  11. $(this).css("background","yellow");
  12. });
  13. });
  14. </script>

HOVER

El evento hover maneja la detección sobre el elemento y la salida del elemento volviendo al estado original,  

  1. <div id="contenedor">
  2. La ventana cambia de borde
  3. </div>
  4. <script>
  5. $(document).ready(function(){
  6. var caja = $("#contenedor");
  7. function borde1(){
  8. $(this).css("border","orange 5px solid");
  9. };
  10. function borde2(){
  11. $(this).css("border","blue 5px dashed");
  12. };
  13. caja.hover(borde1,borde2);
  14. });
  15. </script>
CLICK Y DBCLICK
Tal como el nombre indica detectan un clic y un doble clic del ratón sobre un elemento

  1. <div id="contenedor">
  2. La ventana cambia de sombra
  3. </div>
  4. <script>
  5. $(document).ready(function(){
  6. var caja = $("#contenedor");
  7. caja.click(function(){
  8. $(this).css("box-shadow","15px 10px 10px blue");
  9. });
  10. caja.dblclick(function(){
  11. $(this).css("box-shadow","10px 10px 5px pink");
  12. });
  13. });
  14. </script>

FOCUS Y BLUR

El evento focus detecta el foco sobre un elemento mientras que blur detecta el cambio de foco.

  1. <form>
  2. <input type="text" id="usuario">
  3. </form>
  4. <script>
  5. $(document).ready(function(){
  6. $("#usuario").focus(function(){
  7. $(this).attr("placeholder","Has entrado en el foco");
  8. });
  9. $("#usuario").blur(function(){
  10. $(this).attr("placeholder","Has salido del foco");
  11. });
  12. });
  13. </script>

MOUSEMOVE

El evento mousemove se activa al detectar un movimiento del ratón.

  1. <script>
  2. $(document).ready(function(){
  3. $(document).mousemove(function(e){
  4. console.log("ClientX: " + e.clientX);
  5. console.log("ClientY: " + e.clientY);
  6. });
  7. });
  8. </script>

Se pueden revisar todos los eventos de JQuery desde la documentación oficial Lista de eventos de JQuery

Comentarios: 0

Para poder comentar es necesario iniciar sesión



Este dominio utiliza cookies de terceros para crear estadísticas y publicidad personalizada. Si continúa navegando está aceptando su uso