A way to add declarative bindings using jQuery and a simple module pattern.

app.js

// Given a simplified module pattern like so:
(function(APP, $, _) {
  
  APP.MyWidget = function(opts) {
    var self = {};

    var defaults = {
      // an array of contexts and declarative event bindings
      bindings : [
        {
          // selector of the element events will be delegated to, the "context"
          '#my-widget' : {
          
            // declarative event bindings hash with a pattern of 'event selector' : 'callback' (similar to backbone)
            'click #view-chart'            : 'viewChart',
            'click #view-table'            : 'viewTable',
            'click #view-related-articles' : 'viewRelatedArticles',
            'change #metrics'              : 'handleMetricChange',
            'focusout #search-chart'       : 'queueResultsTimeout',
            'click #addremove'             : 'toggleAddRemoveEntities'
          }
        },
        {
          // a second context in which to bind events that exists in the same widget
          '.add-remove-controls' : {
            'click .close'                 : 'toggleAddRemoveEntities',
            'click .result'                : 'addEntity',
            'click .remove'                : 'removeEntity'
          }
        }
      ]
    };

    // mixin the user defined options to the defaults and assign to self.opts
    self.opts = $.extend(true, defaults, opts || {});
    
    // the functions that will be called when events happen
    self.viewChart = function() {};
    self.viewTable = function() {};
    self.viewRelatedArticles = function() {};
    // ... etc
    
    // an initializer, immediately invoked
    self.init = (function() {
      APP.Util.bindEvents(self, self.opts.bindings);
    })();

    return self;
  };

})(APP, jQuery, _);

// And a util lib that has a bind function
(function(APP, $, _) {
  
  APP.Util = {
    bindEvents : function(obj, bindings) {
      _.each(bindings, function(binding) {
        var context = _.keys(binding)[0];

        _.each(binding[context], function(callback, eventAndSelector) {
          var parts = eventAndSelector.split(" ");
          var event = parts[0];
          var selector = parts[1];

          APP.Util.delegateEventsInContext(context, selector, event, obj[callback]);
        });
      });
    }, 
    
    delegateEventsInContext : function(context, selector, event, callback) {
      $(context).delegate(selector, event, callback);
    }
  };
  
})(APP, jQuery, _);

widget.html

<!-- Leads to binding for a given context automatically, providing an easy interface for event delegation. -->
<div id="my-widget">
  <a href="#" id="view-chart">View the Chart</a> <!-- I have a click event bound to call the function 'viewChart' --> 
  <a href="#" id="view-table">View the Table</a> <!-- I have a click event bound to call the function 'viewTable' -->
  <ul class="add-remove-controls">
    <li><a href="#" class="result">Canada</a></li> <!-- All these results have a click event bound to call 'handleResultClick' -->
    <li><a href="#" class="result">Russia</a></li>
    <li><a href="#" class="result">England</a></li>
    <li><a href="#" class="result">United States</a></li>
    <li><a href="#" class="result">Africa</a></li>
  </ul>
</div>