Attaching jQuery event handlers so that they are triggered first

Question

Is there a way to attach a jQuery event handler such that the handler is triggered before any previously-attached event handlers? I came across this article, but the code didn't work because event handlers are no-longer stored in an array, which is what his code expected. I attempted to create a jQuery extension to do what I wanted, but this is not working (the events still fire in the order they were bound):

$.fn.extend({     bindFirst: function(type, handler) {          var baseType = type;         var dotIdx = type.indexOf('.');         if (dotIdx >= 0) {             baseType = type.substr(0, dotIdx);         }          this.each(function() {             var oldEvts = {};             var data = $.data(this);             var events = data.events || data.__events__;             var handlers = events[baseType];             for (var h in handlers) {                 if (handlers.hasOwnProperty(h)) {                     oldEvts[h] = handlers[h];                     delete handlers[h];                     // Also tried an unbind here, to no avail                 }             }              var self = $(this);             self.bind(type, handler);              for (var h in oldEvts) {                 if (oldEvts.hasOwnProperty(h)) {                     self.bind(baseType, oldEvts[h]);                 }             }         });     } }); 

Is there a natural way to reorder event handling? If there isn't, do you know of technique I could apply? I'm using jQuery 1.4.1, though I'll upgrade if I must.

Answer 1

Here's a simple plugin I did a while back. Lets you bind a handler to the beginning of the list. It is very simple, and I wouldn't guarantee that it works with namespaced events or anything terribly fancy.

For simply binding a single or space separate group of events, it should work.

Example: http://jsfiddle.net/gbcUy/

$.fn.bindUp = function(type, fn) {      type = type.split(/\s+/);      this.each(function() {         var len = type.length;         while( len-- ) {             $(this).bind(type[len], fn);              var evt = $.data(this, 'events')[type[len]];             evt.splice(0, 0, evt.pop());         }     }); }; 

Or if you wanted to manipulate the Array of handlers in some other manner, just get the handlers for the element you want, and manipulate it however you want:

Example: http://jsfiddle.net/gbcUy/1/

var clickHandlers = $('img').data('events').click;  clickHandlers.reverse(); // reverse the order of the Array