Binding Encapsulated Anonymous Functions Without Repetition

Normally, if you want to bind encapsulated event listeners to an object you have to test for support and then call the same function in different ways, for example:

if(typeof document.addEventListener != 'undefined')
{
document.addEventListener('click', someFunction, false);
}
else if(document.attachEvent != 'undefined')
{
document.attachEvent('onclick', someFunction);
}

But there's code repetition there - okay not very much, because it's just a function call ... but what if you wanted to use an anonymous function ..? Well you can't - the code repetition would be unacceptible.

Except that I've though of a way :) It's really obvious actually .. but I'm posting this in the hope that others will go "wow, that's blindingly useful" as I did when I thought of it :thumbsup:

Here it is - it takes advantage of square-bracket notation to use a string reference to the supported method:

//identify supported method of adding encapsulated event listeners
etype = (typeof document.addEventListener != 'undefined') ? 'addEventListener' : (typeof document.attachEvent != 'undefined') ? 'attachEvent' : 'none'

//set event name prefix
eprefix = (etype == 'attachEvent' ? 'on' : '');

//if encapsulated event listening is not supported, don't continue
if(etype == 'none') { return; }

so anonymous functions are built like this:

element[etype](eprefix + 'event', function()
{
... code ...
}, false);

Even though attachEvent doesn't require a third argument, it's ignored, so this syntax works for all.