Los eventos en JQuery

Los enlaces a los eventos en JQuery son en realidad una composición de los selectores y una llamada a uno de los  métodos de esta librería, que nos ayudan a asignar uno o varios eventos, para uno o varios elementos, a la función o funciones especificadas.
Antes de mostrar la forma de asignar los eventos, me gustaría que se tuvieran presentes dos puntos:

  1. Para que estos bindeos sean efectivos, necesitamos ubicarlos en una función que los lance al comienzo de la aplicación, o bien en un momento determinado donde adquieran esa funcionalidad. Por norma general, si queremos manejar los eventos al comienzo de la aplicación, podemos utilizar a su vez el evento ready, el cual ejecuta la función enlazada una vez que el DOM esté listo (se haya terminado de cargar la página).
  2. $(document).ready(function() {

    $("span").text("La pagina ya esta cargada");
    })

  3. Existen dos formas de indicar qué función que queremos que se ejecute: Podemos crear una función anónima, la cual es definida en el momento del bindeo y por lo tanto no es necesario asignarle un nombre específico, o bien podemos escribir el nombre de la función que queremos que se lance en esa determinada acción y ubicar el comportamiento en otro lugar.
  4. $(document).ready(function() {

    alert("Esto es una función anónima")
    })

    $(document).ready(funcionConNombre);

    function funcionConNombre() {

    alert("Esto es una funcion declarada");
    }

Una vez comentado esto, podemos comenzar a ver las distintas funciones de bindeo 🙂
Con esta librería, existen varias formas de enlazar un elemento, o varios, a uno o más eventos:

  • Bind: Podemos asignar cualquier evento existente (onclick, onblur, etc.) a todos los elementos devueltos por el selector utilizado.
  • <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var cont = 0;
    $(document).ready(function() {

    $("#btn").bind("click", function(e) {
    cont++;
    $("span").text(cont);
    })
    });
    </script>
    </head>
    <body>
    <input type="button" value="Bind" id="btn" />
    <br />
    <span></span>
    </body>
    </html>

 Bind acepta eventos personalizados y, además, podemos asignar varios eventos a la vez separados por un espacio.

  • One: La función enlazada al evento elegido solamente se ejecutará una vez.
  • <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var cont = 0;
    $(document).ready(function() {

    $("#btn").one("click", function(e) {
    cont++;
    $("span").text(cont);
    })
    });
    </script>

    </head>
    <body>
    <input type="button" value="One" id="btn" />
    <br />
    <span></span>
    </body>
    </html>
  • Trigger: Se utiliza para ejecutar eventos desde el código. Si utilizamos trigger para invocar un evento soportado por el navegador, debemos tener en cuenta que ejecutará tanto el que hayamos manejado como el del propio navegador.
  • <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var cont = 0;
    $(document).ready(function() {

    $("a").bind("dblclick", function(e) {
    $("#btn").trigger("click");
    });
    $("#btn").bind("click", function(e) {
    cont++;
    $("span").text(cont);
    })
    });
    </script>

    </head>
    <body>
    <input type="button" value="Bind" id="btn" />
    <a href="#">Trigger</a>
    <br />
    <span></span>
    </body>
    </html>
  • TriggerHandler: A diferencia del anterior, solamente lanza el evento que tenemos manejando (Si no existe mandaría undefined) y omite el evento por defecto del navegador.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var cont = 0;
    $(document).ready(function() {

    $("#textbox").bind("focus", function(e) {
    cont++;
    $("span").text(cont);

    });
    $("#btnTrigger").bind("click", function(e) {
    $("#textbox").trigger("focus");
    })
    $("#btnTriggerHandler").bind("click", function(e) {
    $("#textbox").triggerHandler("focus");
    })
    });
    </script>

    </head>
    <body>
    <input type="button" value="Trigger" id="btnTrigger" />
    <input type="button" value="TriggerHandler" id="btnTriggerHandler" />
    <input type="text" id="textbox" />
    <br />
    <span></span>
    </body>
    </html>

En este ejemplo estamos jugando con el evento focus. Si pulsamos el botón que utiliza la función trigger veremos que el cont rapidamente suma dos y en el segundo caso, con triggerHandler, solamente uno. Además podemos comprobar que con triggerHandler no posiciona el foco en el textbox, a diferencia de trigger.

  • Unbind: Se utiliza para realizar lo opuesto que con bind.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var cont = 0;
    $(document).ready(function() {

    $("#btn").bind("click", function(e) {
    cont++;
    $("span").text(cont);
    if (cont > 5) {
    $("#btn").unbind("click");
    }

    });
    });
    </script>
    </head>
    <body>
    <input type="button" value="Unbind" id="btn" />
    <br />
    <span></span>
    </body>
    </html>

  • Live: Esta función en particular permite enlazar eventos a uno o varios elementos como a todos los futuros emparejados con estos primeros. Por el momento, está restringido a los eventos click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress y keyup y no es soportado por los eventos  blur, focus, mouseenter, mouseleave, change y submit.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $("a").live("click", function(e) {
    $(this).before("<a>Otra referencia</a>");
    });
    });
    </script>

    </head>
    <body>
    <a>Una referencia</a>
    <br />
    <span></span>
    </body>
    </html>
  • Nota: En este ejemplo he utilizado before que pertenece al apartado de Manipulación, del cual escribiré más adelante 🙂

  • Die: Sería el unbind de Live.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var cont = 0;
    $(document).ready(function() {

    $("a").live("click", function(e) {
    cont++;
    $(this).before("<a>Otra referencia</a>");
    if (cont > 5)
    $("a").die("click");
    });
    });
    </script>

    </head>
    <body>
    <a>Una referencia</a>
    <br />
    <span></span>
    </body>
    </html>
  • Hover: Simula el posicionamiento sobre un elemento.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {

    $("li").hover(function() {
    $(this).css("color", "red");
    });
    });
    </script>

    </head>
    <body>
    <ol>
    <li>Uno</li>
    <li>Dos</li>
    <li>Tres</li>
    <li>Cuatro</li>
    </ol>
    </body>
    </html>
  • Toggle: Podemos usarlo para proporcionar al evento click varias funciones. Se tiene en cuenta el orden en el cual las definimos y la forma de ejecutar cada una de ellas es hacer tantos click como funciones hayamos declarado dentro de toggle.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery._Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>

    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(document).ready(function() {

    $("span").toggle(
    function() {
    $(this).css("backgroundColor", "red");
    },
    function() {
    $(this).css("backgroundColor", "blue");
    },
    function() {
    $(this).css("backgroundColor", "yellow");
    }
    , function() {
    $(this).css("backgroundColor", "white");
    }
    );
    });
    </script>

    </head>
    <body>
    <span>Utilizando Toggle</span>
    </body>
    </html>

Por último, si lo único que necesitamos es enlazar una función a un evento en concreto, similar a como lo podiamos hacer antaño, podemos indicar el nombre del evento y  definir la función. Para este ultimo caso os dejo el enlace de eventos «helpers», además de todos los que he podido nombrar en este post.

¡Saludos!

11 comentarios sobre “Los eventos en JQuery”

  1. ¡Hola Montse! 🙂

    He adjuntado al post un rar con los ejemplos que muestro en él. Si necesitas algo más avísame ¿Ok?

    Gracias por tu comentario,

    ¡Saludos!

  2. Hola Oye y si yo solo necesito mostrar un tabbedpanel como lo haria con el $(document).ready de verdad soy bastante nuevo en este tema.

    Muchas gracias y se ve que este post me va a sevir mucho para entrar a JQUERY mil Gracias

  3. Hola Vic,

    En primer lugar, muchas gracias por tu comentario 🙂
    No tengo claro si lo que necesitas es crear un tabbedpanel o simplemente mostrar uno que tienes oculto.

    Te paso este link donde puedes ver cómo utilizar el tabbedpanel de JQuery UI http://jqueryui.com/demos/tabs/

    Si lo que tienes es un tabbedPanel oculto y simplemente necesitas mostrarlo podrías hacer lo siguiente:

    $(document).ready(function() {
    $(«#idTabbedPanel»).show();
    });

    En realidad, lo único que hace ese método de JQuery es mostrar el elemento seleccionado poniendo su propiedad display a block.

    Espero que te ayude.

    ¡Saludos!

  4. creo que no formule bien la pregunta ahi va

    ¿Necesito utilizar el Document.ready para que el contenido de las pestañas se muestre?

    Gracias!!!!

  5. Hola Gisela

    Si, no se puede utilizar un tabbedpanel anidado con otro, yo tengo usando la version 2.2.1 y tampoco me aparece el contenido de los tabs.

    Alguna ayuda con esto, se utilizara el document.ready?

    Saludos.

  6. Hola Jorge y Vic,

    En primer lugar disculpad la espera, estos días han sido un caos por motivos de trabajo y no he podido estar pendiente del Blog 🙁

    No he tenido la oportunidad de trabajar con el plugin Struts2 y desconozco su funcionamiento por el momento. Lamento no poder ayudaros a día de hoy pero, si mi tiempo me lo permite, intentaré pelearme con él para ver si conseguimos una solución al respecto.

    ¡Saludos!

  7. Hola disculpa una pregunta yo utilizo un componente calendario de jquery el cual funciona perfecto ejecutando solo en un formulario o ventana, pero cuando a ese formulario es llamado por medio de ajax (en forma asincrona), ese calendario en especifico ya no quiere funciona tu me podrias a ayudar para saber que es lo que tengo que hacer.

    Roberto

Responder a anonymous Cancelar respuesta

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