I've decided it's time I made my site more accessible. I'm trying to get rid of all inline onclick handlers and place them in an external file. I've search around and found the following code from AListApart, which works with onclick. I tried to modify it for mouseovers but Firebug just reports an exception.
The in the head:
Is there any way I can use onclicks which aren't inline?
Code:
// [URL unfurl="true"]http://www.alistapart.com/articles/popuplinks[/URL]
function listen(event, elem, func) {
elem = getElem(elem);
if (elem.addEventListener) // W3C DOM
elem.addEventListener(event,func,false);
else if (elem.attachEvent) // IE DOM
elem.attachEvent('on'+event, function(){ func(new W3CDOM_Event(elem)) } );
// for IE we use a wrapper function that passes in a simplified faux Event object.
else throw 'cannot add event listener';
}
function W3CDOM_Event(currentTarget) {
this.currentTarget = currentTarget;
this.preventDefault = function() { window.event.returnValue = false }
return this;
}
function getElem(elem) {
if (document.getElementById) {
if (typeof elem == "string") {
elem = document.getElementById(elem);
if (elem===null) throw 'cannot get element: element does not exist';
} else if (typeof elem != "object") {
throw 'cannot get element: invalid datatype';
}
} else throw 'cannot get element: unsupported DOM';
return elem;
}
Code:
listen('load', window, function() {
listen('mouseover','trigger1',function1);
listen('mouseover','trigger2',function2);
});