Cross-Browser addEventListener/attachEvent

[Charles Stover]

Just finished this. Only downside is that you have to use THIS instead of this for the functions you attach.

It works by storing functions in arrays for browsers that don't support said event listeners.
eventListenerID is the key given to items that are given event listeners so that their functions can be found when they're called.
eventListeners is the array where the functions are stored.
r, rel, and THIS are variables used when calling the events.

I made two versions. The first version uses less memory, as it only stores multiple functions into an array when necessary. The second version stores all functions into an array, so it uses more memory, but the code is much shorter. So, take your pick, I guess.

Version 1 (not as pretty, imo):
var eventListenerID = 0, eventListeners = [], r, rel, THIS,
eventListener = function(item, type, fnctn)
{
if (typeof(item.addEventListener) == "function")
{
item.addEventListener(type, function() { THIS = this; }, false);
item.addEventListener(type, fnctn, false);
}
else
{
type = "on" + type;
if (typeof(item.attachEvent) == "function")
{
item.attachEvent(type, function() { THIS = this; });
item.attachEvent(type, fnctn);
}
else if (typeof(item[type]) == "function")
{
if (item.getAttribute("rel") && (rel = item.getAttribute("rel").match(/listener(\d+)/)))
eventListeners[rel][eventListeners[rel].length] = fnctn;
else
{
eventListeners[eventListenerID] = [
item[type],
fnctn
];
if (item.getAttribute("rel"))
item.setAttribute("rel", this.getAttribute("rel") + " listener" + eventListenerID);
else
item.setAttribute("rel", "listener" + eventListenerID);
eventListenerID++;
}
item[type] = function()
{
rel = this.getAttribute("rel").match(/listener(\d+)/)[1];
THIS = this;
for (r = 0; r < eventListeners[rel].length; r++)
eventListeners[rel][r]();
};
}
else
item[type] = fnctn;
}
};

Version 2:
var eventListenerID = 0, eventListeners = [], r, rel, THIS,
doEventListener = function()
{
THIS = this;
rel = this.getAttribute("rel").match(/listener(\d+)/)[1];
for (r = 0; r < eventListeners[rel].length; r++)
eventListeners[rel][r]();
},
eventListener = function(item, type, fnctn)
{
if (item.getAttribute("rel") && (rel = item.getAttribute("rel").match(/listener(\d+)/)))
{
rel = rel[1];
eventListeners[rel][eventListeners[rel].length] = fnctn;
}
else
{
eventListeners[eventListenerID] = [ fnctn ];
if (item.getAttribute("rel"))
item.setAttribute("rel", item.getAttribute("rel") + " listener" + eventListenerID);
else
item.setAttribute("rel", "listener" + eventListenerID);
eventListenerID++;
if (typeof(item.addEventListener) == "function")
item.addEventListener(type, doEventListener, false);
else if (typeof(item.attachEvent) == "function")
item.attachEvent("on" + type, doEventListener);
else
item["on" + type] = doEventListener;
}
};

[Jordan]

It works great. Nice job.

I like the first one more just because longer code is many times better since you are doing more for the computer in a sense.

I would have prototyped it cause I like that syntax more ( form.eventListener("submit", function(){}); ), except I think the Object.prototype.eventListener = function(type, fnctn) is buggy in IE. At least, it can be.

I like this though since I don't have to type all those if statements to just attach an event to an object.

[Charles Stover]

I would have prototyped it, but I've always had trouble with prototyping elements.
Anyway, I prefer the second simply because the first has to defined THIS for both addEventListener and attachEvent just so that they'll be compatible with IE's lack of support for "this". Whereas the second uses the same function for all three methods.