Delegación de eventos fácil con jQuery

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:

$('#thing').click(function(e) {
  var target = $(e.target);

  if (target.hasClass('quit') return doQuitStuff();
  if (target.hasClass('edit') return doEditStuff();
  // and so on...
});

Esto se puede simplificar definiendo una función de delegación:

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));
  }
}

Que se utilizaría de la siguiente forma:

$('#thing').click($.delegate({
  '.quit': function() { /* do quit stuff */ },
  '.edit': function() { /* do edit stuff */ }
}));

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.