Eventos en jQuery

Como funcionan los eventos en jQuery

$(".mienlace").click(function(mievento){
   mievento.preventDefault();
   alert("Has hecho clic. Como he hecho preventDefault, no te llevaré al href");
});

• El evento se define sobre todos los objetos seleccionados mediante el selector jQuery

En este caso todos los elementos con class="mienlace"

• El tipo de evento lo definimos con la función click o similares.
• El evento define como parámetro una función que será la manejadora del evento.
• La función manejadora del evento tiene a su vez un parámetro mievento que nos permite utilizar las propiedades o métodos del evento en cuestión.

En este caso utilizaremos el método preventDefault()

Listado de Eventos

Eventos relacionados con el ratón

• click()

Sirve para generar un evento cuando se produce un clic en un elemento de la página.

• dblclick()

Para generar un evento cuando se produce un doble clic sobre un elemento.

• mousedown()

Para generar un evento cuando el usuario hace clic independientemente de si lo suelta o no. Sirve tanto para el botón derecho como el izquierdo del ratón. Útil para drag&drop

$("#p").mousedown(function (b) {
    alert(b.which);
    //b puede ser 1, 2 o 3 (botón izquierdo, central o derecho)
});

• mouseup()

Para generar un evento cuando el usuario ha hecho clic y luego suelta un botón del ratón. El evento mouseup se produce sólo en el momento de soltar el botón.

• mousemove()

Evento que se produce al mover el ratón sobre un elemento de la página.

$("#contendedor").mousemove(function (c) {
        $(this).html("El ratón se está moviendo. Las coordenadas son " + c.pageX + ", " + c.pageY);
    });

• mouseout()

Este evento sirve para lo mismo que el evento mouseout de JavaScript. Se desata cuando el usuario sale con el ratón de la superficie de un elemento.

• mouseover() y mouseout()

Sirve para lo mismo que los eventos mouseover y mouseout de Javascript. Se produce cuando el ratón está sobre un elemento, pero tiene como particularidad que pueden producirse varias veces mientras se mueve el ratón sobre el elemento, sin necesidad de haber salido (por los elementos anidados).

• mouseenter() y mouseleave()

Normalmente preferiremos estos eventos respecto a los originales de javascript ya que se ejecutarán sólo una vez.

• hover()

Esta función en realidad sirve para manejar dos eventos, cuando el ratón entra y sale de encima de un elemento. Por tanto espera recibir dos funciones en vez de una que se envía a la mayoría de los eventos.

A menudo utilizaremos este evento mejor en vez de mouseenter() y mouseleave().

.hover(function() {
     Put in mouse enter function here
  }, function() {
     Put in mouse leave function here
});
//Ejemplo:
$("#p").hover(function () {
     $(this).css("background-color", "blue");
  }, function () {
     $(this).css("background-color", "white");
});

• toggle()

Sirve para indicar dos o más funciones para ejecutar cuando el usuario realiza clics, con la particularidad que esas funciones se van alternando a medida que el usuario hace clics.

$("#p").toggle(function () {
  $(this).css("background-color", "blue");
  }, function () {
     $(this).css("background-color", "red");
  }, function () {
     $(this).css("background-color", "yellow");
});

Eventos relacionados con el teclado

• Primero se ejecuta un evento keydown(), luego uno o varios eventos keydown() y luego un evento keyup().
• keydown()

Se produce en el momento que se presiona una tecla del teclado, independientemente de si se libera la presión o se mantiene. Se produce una única vez.

• keyup()

Se ejecuta en el momento de liberar una tecla.

• keypress()

Se ejecuta una vez, como respuesta a una pulsación e inmediata liberación de la tecla, o varias veces si se pulsa una tecla y se mantiene pulsada.

// Asignar un manejador de eventos usando click
$("#header a").click(function() {
    // manejar el evento
});
 
// Asignar un manejador de eventos usando on
$("#header a").on("click", function() {
    // manejar el evento
});

<div id="content">
    <a href="#">enlace1</a>
    <a href="#">enlace2</a>
    <a href="#">enlace2</a>
</div>

$("#content").on("click", "a", function() {
    // manejar el evento
    // $(this) apunta al <a> que ha generado el evento
});

$("p").on("click mouseenter mouseleave", function(e){
  if ($(this).css("color")!="rgb(250, 100, 0)")
    $(this).css("color", "rgb(250, 100, 0)");
  else
    $(this).css("color", "rgb(150, 0, 255)");
  })

<!DOCTYPE html>
<html>
 <head>
  <style>
     button { margin:5px; }
     button#theone { color:red; background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>
 <body>
   <button id="theone">Does nothing...</button>
   <button id="bind">Add Click</button>
   <button id="unbind">Remove Click</button>
   <div style="display:none;">Click!</div>
   <script>
      function aClick() {
         $("div").show().fadeOut("slow");
      }
      $("#bind").click(function () {
         $("body").on("click", "#theone", aClick)
         .find("#theone").text("Can Click!");
      });
      $("#unbind").click(function () {
         $("body").off("click", "#theone", aClick)
         .find("#theone").text("Does nothing...");
      });
   </script>
 </body>
</html>