$addHandler : cross browser handler execution sequence

Fri, 07 Nov 2008 22:00:00 GMT

$addHandler is an excellent method to attach event handlers to DOM elements in cross browser scripting, defined in standard ASP.NET AJAX client library. It hides the underlying browser specific event registration methods, and gives you the unified way across multiple browsers. One possible problem that one can face is that when attaching multiple handlers to same event of single DOM element, the handlers will be invoked in different order for different browsers. The handlers will be invoked in LIFO (handlers will be invoked in order reverse to in which they are registered) principle in IE, while FIFO (handlers will be invoked in order in which they are attached) principle in Firefox and Opera.

This behavior is due to the fact that $addHandler is using attachEvent method for trident based Internet Explorer, and addEventListener for gecko based Mozilla FireFox and other browsers, which in turn call handlers in different sequence. Well in most of the cases, handlers’ execution sequence does not matter, because there could always be a sequence independent alternative implementation. However, in some scenarios, predetermined sequence can help a lot and save a lot of time. I faced one such scenario few days back, so looked around the way to do this.

I was looking for the $addHandler personal version which is:

ASP.NET Ajax compliant ( having same parameters as original one, and returns same Sys.UI.DomEvent so that can be used with standard ASP.NET Ajax code)
Supporting predetermined and same event handlers calling sequence across all browsers.
Not conflicted with $addHandler (both the new and original can be used simultaneously on single element’s same event without any conflict and change in behavior).

To look around what actually is happening in $addHandler, I have looked in to MicrosoftAjax.debug, the debug file provided with ASP.NET 2 Ajax client library to check the actual implementation of method. You can find this file under your ASP.NET 2 Ajax Extensions installation directory. Its path on my PC is

\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX

Extensions\vX.X.X\MicrosoftAjaxLibrary\System.Web.Extensions\X.X.X.X

Where X is ASP.NET Ajax version number, you have installed.

I have inspected the method and came up with my own addSeqHandler inspired by original $addHandler method, which fulfill above requirements. Here is the code for addSeqHandler:

var addSeqHandler = function(element, eventName, handler) {

var e = Function._validateParams(arguments, [

{name: "element", domElement: true},

{name: "eventName", type: String},

{name: "handler", type: Function}

]);

if (e) throw e;

if (!element._seqEvents) {

element._seqEvents = {};

}

var eventCache = element._seqEvents[eventName];

if (!eventCache) {

element._seqEvents[eventName] = eventCache = [];

}

if(eventCache.length==0)

$addHandler(element, eventName,_invokeSeqHandlers);

eventCache[eventCache.length] = {

handler: handler,

browserHandler:

function(e){return handler.call(element, new Sys.UI.DomEvent(e));}

};

}

As you see we have registered our own handler using $addHandler and start maintaining our own _seqEvents list of events registrations along with _events list (so called cache according to the debug code) which is maintained by $addHandler. And so when specific event will be fired, _invokeSeqHandlers will also be called along with other handlers and then _invokeSeqHandlers will manage and call all events registered through our new method.

Here is the code of_invokeSeqHandlers

var _invokeSeqHandlers = function(eve){

var cache = this._seqEvents[eve.type];

for (var i = 0; i < cache.length; i++) {

cache[i].browserHandler.call(this, eve);

}

Please note that all methods registered through addSeqHandler will be called in FIFO principal in all browsers. We have introduced our own list of events, so we have to provide our own custom remove method now. Here is the method to remove our sequential handlers:

var removeSeqHandler = function(element, eventName, handler) {

var e = Function._validateParams(arguments, [

{name: "element", domElement: true},

{name: "eventName", type: String},

{name: "handler", type: Function}

]);

if (e) throw e;

if ((typeof(element._seqEvents) !== 'object') || (element._seqEvents == null)) throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);

var eventCache = element._seqEvents[eventName];

if (!(eventCache instanceof Array)) throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);

for (var i = 0, l = eventCache.length; i < l; i++) {

if (eventCache[i].handler === handler) {

break;

}

eventCache.splice(i, 1);

if(eventCache.length==0)

$removeHandler(element,eventName,_invokeSeqHandlers);

}

Above methods are tested and worked fine in IE (versions 6, 7, 8), FireFox 3, Safari 3, Opera 9.

Download code here:

Bajwa's Blog

$addHandler : cross browser handler execution sequence