Disparar un controlador de eventos de la forma correcta en Jquery

A través del método $.fn.trigger, jQuery provee una manera de disparar controladores de eventos sobre algún elemento sin requerir la acción del usuario. Si bien este método tiene sus usos, no debería ser utilizado para simplemente llamar a una función que pueda ser ejecutada con un click del usuario. En su lugar, debería guardar la función que se necesita llamar en una variable, y luego pasar el nombre de la variable cuando realiza el vinculo (binding). De esta forma, podrá llamar a la función cuando lo desee en lugar de ejecutar $.fn.trigger.

var foo = function(e) {

if (e) {

console.log(e);

} else {

console.log(‘esta ejecucción no provino desde un evento’);

}

};

$(‘p’).click(foo);

foo(); // en lugar de realizar $(‘p’).trigger(‘click’)

3.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. 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.

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.

Nota

A partir de la versión 1.4.2, se introdujo $.fn.delegate, sin embargo a partir de la versión 1.7 es preferible utilizar el evento $.fn.on para la delegación de eventos.

Delegar un evento utilizando $.fn.on

$(‘#myUnorderedList’).on(‘click’, ‘li’, function(e) {

var $myListItem = $(this);

// …

});

Delegar un evento utilizando $.fn.delegate

$(‘#myUnorderedList’).delegate(‘li’, ‘click’, function(e) {

var $myListItem = $(this);

// …

});

Desvincular Eventos Delegados

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

Desvincular eventos delegados

$(‘#myUnorderedList’).off(‘click’, ‘li’);

$(‘#myUnorderedList’).undelegate(‘li’, ‘click’);

Funciones Auxiliares de Eventos

jQuery ofrece dos funciones auxiliares para el trabajo con eventos:

$.fn.hover

El método $.fn.hover permite pasar una o dos funciones que se ejecutarán cuando los eventos mouseenter y mouseleave ocurran en el elemento seleccionado. Si se pasa una sola función, está será ejecutada en ambos eventos; en cambio si se pasan dos, la primera será ejecutada cuando ocurra el evento mouseenter, mientras que la segunda será ejecutada cuando ocurra mouseleave.

Nota

A partir de la versión 1.4 de jQuery, el método requiere obligatoriamente dos funciones.

La función auxiliar hover

$(‘#menu li’).hover(function() {

$(this).toggleClass(‘hover’);

});

$.fn.toggle

Al igual que el método anterior, $.fn.toggle recibe dos o más funciones; cada vez que un evento ocurre, la función siguiente en la lista se ejecutará. Generalmente, $.fn.toggle es utilizada con solo dos funciones. En caso que utiliza más de dos funciones, tenga cuidado, ya que puede ser dificultar la depuración del código.

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros