Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 02/06/2013

jQuery: Diferencia entre los eventos bind, live, delegate y on

Bueno, todos los que trabajamos con jQuery, nos hemos preguntado alguna vez porque tanta función para un mismo propósito. Pues hoy intentaremos desvelar sus diferencias.

.bind()

El evento bind() une el evento que queremos activar con los elementos actuales que tenemos en la página. No se une al DOM, por tanto si, en tiempo de ejecución, creamos un nuevo elemento, dicho elemento, no reposnderá ante ese evento y no tendrá acción asociada alguna.

$(document).ready(function(){         
    $("div a").bind("click",function(){
        alert('Has hecho click');
    });
});

.live()

El evento live() une el evento que queremos activar con los elementos que coincidan con el selector introducido. A partir de la versión 1.7 está depredicada. Este evento sí se une al DOM, por tanto si, en tiempo de ejecución, creamos un nuevo elemento que responde a las reglas de eventos ya asignadas con live(), el nuevo elemento reposnderá ante ese evento.

Cuando controlamos nuestra página con live() es muy recomendable usar los métodos event.preventDefault() y event.stopInmediatePropagation() para evitar efectos indeseables.

$(document).ready(function(){         
    $("div a").live("click",function(){
        alert('Has hecho click');
    });
});

.delegate()

El evento delegate() une el evento que queremos activar con los elementos que coinciden con el selector, ahora o en el futuro. Este evento sí se une al DOM, por tanto si, en tiempo de ejecución, creamos un nuevo elemento que responde a las reglas de eventos ya asignadas con live(), el nuevo elemento reposnderá ante ese evento.

Al igual que live(), cuando controlamos nuestra página con este controlador es muy recomendable usar los métodos event.preventDefault() y event.stopInmediatePropagation() para evitar efectos indeseables.

$(document).ready(function(){         
    $("div").delegate("a","click",function(){
        alert('Has hecho click');
    });
});

La diferencia con live() es que live() no se puede utilizar de forma encadenada ya que tiene que ser utilizada en un selector o elemento. Por ejemplo, si tenemos un div, que, a su vez, tiene una tabla que cuenta con otros elementos hijos como tr y queremos asignar el evento click a dichos tr de la tabla.

$(document).ready(function(){         
    $("#idDiv").children("table").find("tr").live("tr","click",function(){
        alert('Has hecho click');
    });
});

$(document).ready(function(){         
    $("#idDiv").children("table").delegate("tr","click",function(){
        alert('Has hecho click');
    });
});

.on()

Si estamos utilizando la versión 1.7 o superior esta es la opción más recomendable.

El evento on() se ha diseñado para substituir los eventos delegate() y bind(). Si estamos usando bind() pasar a usar on() es tan fácil como cambiar las etiquetas, una por la otra.

Este método cede al controlador de eventos del documento a los nuevos elementos que coincidan con los criterios de nuestra condición. Con el fin de mejorar su eficiencia, on() debe unirse de forma específica, no generalizada.

// .bind(events, handler);
$('body a').bind('click', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
});
// on(events, handler);
$('body a').on('click', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
});

La diferencia más notable con live() es que con on() sólo realiza una llamada en vez de las n llamadas que realiza live(). Dicho de otr forma, cuando hacemos click en un elemento, si lo manejamos con on() sólo se hará una llamada al DOM desde ese elemento. Si manejamos el evento click con live() se harán tantas llamadas como elementos haya en la página en la que estamos trabajando.

Por ejemplo:

<div id="id1">
    <a></a>
</div>
<div id="id2">
    <a></a>
</div>
<script>
    $(document).ready(function(){         
        $("a").live("click",function(){
            alert('Has hecho click');
        });
    });
</script>

Este caso generaría varios eventos, un evento click que iría desde #id2 a hasta #id1 a y, este, hasta el DOM y otro que iría desde #id2 a hacia el DOM.

<div id="id1">
    <a></a>
</div>
<div id="id2">
    <a></a>
</div>
<script>
    $(document).ready(function(){         
        $("a").on("click",function(){
            alert('Has hecho click');
        });
    });
</script>

Este caso generaría un evento click que iría desde #id1 a hasta el DOM y otro que iría desde #id2 a hacia el DOM.

<div id="id1">
    <a></a>
</div>
<div id="id2">
    <a></a>
</div>
<script>
    $(document).ready(function(){         
        $("a").on("click", "div#id2",function(){
            alert('Has hecho click');
        });
    });
</script>

Este caso generaría un único evento click que iría desde #id2 a hasta el DOM.

Si necesitáis más información Contactar con nosotros y os informaremos más detalladamente sobre este o cualquier otro tema.

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.