Qué es y cómo usar el Método on() de jQuery – Tutorial

Desde la versión 1.7 de jQuery tenemos el método on(), que nos ofrece toda la funcionalidad necesaria para gestionar eventos. Gracias a este método ya no necesitamos los antiguos bind(), live() o delegate(), pero tampoco blur(), focus(), click(), hover() y otros.

Al igual que existe on(), tenemos su contrario, off(), que elimina los eventos asignados con on().

Pero lo mejor es que veamos ejemplos.

Supongamos que queremos hacer algo cuando se haga click sobre un botón:

Es como lo haríamos tradicionalmente con click(). Pero si miramos el código de jQuery veremos que en realidad lo que sucede es que se está llamando al método on(), por lo que lo más rápido es hacer:

Esta es la ruta más directa. Y lo mismo para otros métodos como change(), hover(), mouseenter(), etc.. (en realidad hover() lo que hace es llamar a “mouseenter()” y a “mouseleave()” que a su vez llaman al método “on()” )

Veamos jQuery. Si descargamos la versión 1.7 o superior y buscamos en su código, veremos lo siguiente:

De aquí sólo nos interesa ver que los métodos “blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error y contextmenu” al final terminan todos en “this.on( name, null, data, fn )“.

bind(), live() y delegate()

Antiguamente también se hacía:

O si queríamos que el evento funcionara incluso después de añadir nuevos elementos “button” al documento entonces usábamos el método live():

Con posterioridad, jQuery introdujo “delegate()“, que nos permitía asignar un evento a un contexto. Por ejemplo, si el botón está (o va a estar, si se añade con posterioridad) dentro de un div con la clase “contenedor”:

Pero igual que con los anteriores, tanto bind(), como live() o delegate() lo único que hacen es llamar al método on().

Veámoslo una vez más en el código de jQuery:

Es decir, podemos seguir usándolos, pero no tiene mucho sentido si sabemos que jQuery en realidad está llamando el método on().

Podemos terminar viendo un ejemplo que nos ofrece la propia página de jQuery sobre cómo usar el método on() con un evento delegado (como el que vimos antes con “delegate()“). Supongamos que tenemos una tabla con 1.000 filas en su tbody. Con este código asignamos el evento a los 1.000 elementos, con la carga de trabajo que supone:

En cambio, con el evento delegado podemos asignar el gestor del evento sólo a un elemento, en este caso el “tbody”, y el evento sólo necesitará subir un nivel (desde el tr sobre el que se ha hecho click hasta tbody):

12 comentarios en “Qué es y cómo usar el Método on() de jQuery – Tutorial

  1. Excelente aporte!

    Solo un detalle.

    Si observas el código fuente de jQuery 1.7.2+, la función live(). apunta a la función nueva on().

    Por lo que la forma correcta de utilizar on(). (y por supuesto off().) según jQuery es asi:

    Comento esto por que si intentas utilizar la función on(). como la propones aqui, funcionará con los elementos existentes en el DOM. Pero al momento de agregar elementos al documento dinámicamente, ya sea por eventos o AJAX, no funcionará.

    Saludos!

    1. Buenas tardes amigos, me parece excelente esta acotacion, ahora bien, les consulto como haria si quiero que funcione para los elementos agregados de forma dinamica por funciones ajax, pero que solo aparecen en el DOM y ya, es decir, necesito que funcione sin necesidad que ocurra un evento, como haria en este caso?

  2. te falto cerrar una )

    1. hola buenas tardes quisiera saber que es lo que contiene “e” y si lo puedo utilizar dentro de la funcion como una variable mas
      solo se que .on() puede tener estos parametros (‘evento’,’selector’,’datos’) , pero en la parte de datos esta la funcion(e){} pero no que es lo que contiene ‘e’ en ese momento me puede explicar ?.
      Gracias

  3. Holas!!

    Tengo un formulario donde he creado un input de fechas :

    HTML:

    El problema es que CLONO dinámicamente este elemento (cambiando los indices de cada elemento) y  pierde el comportamiento para todos elementos donde aplico el datepicker…

    ¿Cómo puedo aplicar .on / .delegate  o el que sea el caso

    ESPERO ME PUEDAN BRINDAR SU AYUDA …Muchas gracias 😉

     

     

     

     

  4. Hola, muy buenos dias.

    Mi consulta es, el evento click() funciona cuando uno hace click a un objeto, que evento necesito para llamarlo automaticamente??

    supongamos si cumple una condicion o un cambio en la base de datos le llamo a una funcion jquery.

     

    Saludos espero ayuda…..

  5. tengo el sgt codigo; con .LIVE funcionaba pero ahora con .ON no!
    se cargaba dinamicamente la parte del div.

    debe haber alguna forma de poder hacer esto,

  6. DTB…

    Hola. Buenos días!

    Gracias por la publicación, me fue de mucha ayuda.

    Sin embargo, estoy presentando un problema. Tengo el evento click para 7 elementos dentro de la página, llamados de la siguiente forma:

    acá llamo una funcion c# con $.ajax y se muestra un modal, ésto funciona, pero cuando se invoca el segundo, tercer…. elemento la llamada a la función c# se repite, intenté con la función

    pero no funciona. En éstos casos cómo podría hacer?

    Gracias de antemano por la ayuda…

    Saludos!

Deja un comentario

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