5.5. Incrementar el rendimiento con la delegación de eventos

Cuando trabaje con jQuery, frecuentemente añadirá nuevos elementos a la página, y cuando lo haga, necesitará vincular eventos a dichos elementos — eventos que ya estaban vinculados a elementos en la página. En lugar de repetir la tarea cada vez que se añade un elemento, es posible utilizar la delegación de eventos para hacerlo. Con ella, podrá enlazar un evento a un elemento contenedor, y luego, cuando el evento ocurra, podrá ver en que elemento sucede. Si todo esto suena complicado, afortunadamente jQuery lo hace fácil a través de los métodos $.fn.live y $.fn.delegate.

La delegación de eventos posee algunos beneficios, incluso si no se tiene pensando añadir más elementos a la página. El tiempo requerido para enlazar controladores de eventos a cientos de elementos no es un trabajo trivial; si posee un gran conjunto de elementos, debería considerar utilizar la delegación de eventos a un elemento contenedor.

Delegar un evento utilizando $.fn.delegate

$('#myUnorderedList').delegate('li', 'click', function(e) {
    var $myListItem = $(this);
    // ...
});

Delegar un Evento utilizando $.fn.live

$('#myUnorderedList li').live('click', function(e) {
    var $myListItem = $(this);
    // ...
});

5.5.1. Desvincular eventos delegados

Si necesita eliminar eventos delegados, no puede hacerlo simplemente desvinculándolos. Para eso, utilice el método $.fn.undelegate para eventos conectados con $.fn.delegate, y $.fn.die para eventos conectados con $.fn.live. Al igual que cuando se realiza un vinculo, opcionalmente, se puede pasar el nombre de una función vinculada.

Desvincular eventos delegados

$('#myUnorderedList').undelegate('li', 'click');
$('#myUnorderedList li').die('click');