Javascript Solution for Appending Handler to Events
May 11, 2011
Often in Javascript components meant for much larger projects (e.g. Drupal, Joomla, MediaWiki, PmWiki, etc.) it becomes necessary to append functions (event handlers) to some event (which may be non-empty because some other Javascript module might have added handlers to it). Doing something straightforward like
will overwrite the previous handlers, which is not desirable.
A descent solution that is a popular result from Google search is as follows:
document.onmouseup = function() {
if (oldhandler) oldhandler();
myMouseUpHandler();
}
Using the concept of this model, I came up with a much more general function that can be used as a library function for adding handlers to arbitrary events. The library function is as follows:
// 'theevent' is a string. 'newhandler' is a function name or a string.
// position is 'post' (default) or 'pre'
// If 'condition' is provided, the function that is evaluated first must
// return the value of the 'condition' for the next function to be evaluated.
// 'finalEvalS' is a string to be evaluated at the end of the combined handler execution.
// This is required for passing signals to browser's native handlers. It can contain
// variables 'retOld' and 'retNew'.
if (typeof(position)=='undefined') position='post';
if (typeof(finalEvalS)=='undefined') finalEvalS="";
eval("var oldhandler = " + theevent);
evalStartS = theevent + " = function(e) { ";
oldEvalS = " if (oldhandler) { " +
" if (typeof(oldhandler)=='string') eval('r='+oldhandler); " +
" else r = oldhandler(e); " +
" retOld = r; " +
" } ";
condStartS = ""; condEndS = "";
if (typeof(condition)!='undefined') { condStartS = " if (r===condition) {"; condEndS = "}"; }
newEvalS = " if (typeof(newhandler)=='string') eval('r='+newhandler); " +
" else r = newhandler(e); " +
" retNew = r; ";
evalEndS = finalEvalS + " } ";
if (position == 'post') evalS = evalStartS + oldEvalS + condStartS + newEvalS + condEndS + evalEndS;
else if (position == 'pre') evalS = evalStartS + newEvalS + condStartS + oldEvalS + condEndS + evalEndS;
eval(evalS);
}
The last three parameters of the function are optional. They are described in the comments. The first parameter 'theevent' needs to be a string with the full name of the event.
Typical uses of this function for adding handlers to events:
AppendHandlerToEvent( "document.getElementById('thediv').oncontextmenu", showRightclickMenu,
'pre', false, "return false;" );