[foobar2k]

You could trivially restructure the code to factor out global page actions into an object, like this:

    // Make a global page actions object
    PageActions = {
      selectAll: function (event, context) {...},
      nextPage: function (event, context) {...},
      prevPage: function (event, context) {...},
    };

    // Hook up clicks to global actions
    // Eg: <a href="#" data-action="selectAll">All</a>
    $("[data-action]").click(function () {
      var action = $(this).data("action");
      PageActions.selectAll("click", this);
    });

    // Hook up keypresses to global actions
    Mousetrap.bind("a", function () {
      PageActions.selectAll("keypress", this);
    });

This would help with code structure and organization, at the cost of flexibility.

[fjhqjv]

I like to go one step further and simply add a global event delegate to transparently tie DOM elements into a UI controller scoped to a particular portion of the application (to account for sidebars acting differently than the main content). Since 95% of the events handled are click events, it saves a lot of time.

The whole thing ends up being about ten lines of code to implement and handles event binding for practically the entire application. Literally ends up cutting out thousands of lines of boilerplate in larger applications.

I've also found that the actual event object is only useful in a very small amount of cases (drag events and such), to the point where if I ever really need to pass it along, I'll just write a custom event controller for it (using data-handler to specify the custom controller).

When I have too much free time on my hands, I cut out the data attributes entirely and instead route using good old normal hrefs, which as a bonus can render on their own if something goes wrong with the JS.