JavaScript event hooking with data-action

data-action.js

// Set up HTML hooks without id or extra classes
<button data-action="openLogin">Login</button>
<a href="javascript:;" data-action="openEditor">Link</a>

// Using [data-action=""] selectors instead of class selectors when binding events in JavaScript
var actions = {
    openLogin: openLoginWindow,
    openEditor: function() { ... }
//....
};

// Delegate click events on the body to those DOM nodes which have a data-action attribute
$('body').on('click', '[data-action]', function() {
    var action = $(this).data('action');
    if (action in actions) {
        actions[action].apply(this, arguments);
    }
});

// If future components need to be hooked as well, we would just need to add them to the actions object
actions.newHook = function() {};
actions.otherHook = componentFunction;