Cuando se genera un evento en una página web, como hacer un click sobre un elemento, si dicho elemento no tiene implementada una función onclick
, se busca dicha función en su elemento padre, y así sucesivamente hasta llegar al elemento body
. Este mecanismo se llama emergencia de eventos o event bubbling y puede ser aprovechado para definir las funciones de tratamiento de eventos sobre un elemento padre y que se aplique sobre todos los hijos a la vez, tal y como se explica aquí.
Esta sería una forma tradicional de realizarlo con jQuery:
Esto se puede simplificar definiendo una función de delegación:
$('#thing').click(function(e) {
var target = $(e.target);
if (target.hasClass('quit') return doQuitStuff();
if (target.hasClass('edit') return doEditStuff();
// and so on...
});
Que se utilizaría de la siguiente forma:
jQuery.delegate = function(rules) {
return function(e) {
var target = $(e.target);
for (var selector in rules)
if (target.is(selector)) return rules[selector].apply(this, $.makeArray(arguments));
}
}
La función simplemente recorre las reglas comprobando si el elemento que disparó el evento pertenece a un selector y lanzando la función correspondiente pasándole el objeto evento.
Via danwebb.net - Event Delegation Made Easy In jQuery.
$('#thing').click($.delegate({
'.quit': function() { /* do quit stuff */ },
'.edit': function() { /* do edit stuff */ }
}));
16 marzo, 2008
Delegación de eventos fácil con jQuery
Suscribirse a:
Enviar comentarios (Atom)
0 comentarios:
Publicar un comentario