So I got to thinking about why I hade loads of onclick
elements written into my code and how it really didn't help the readability and purity of the X/HTML code so I decided to look at addEventListener
which is something I've seen lots on comp.lang.javascript but has always worried me ever so slightly. Anyway, it's not all that hard really, you just do something like var helloP = document.getElementById("helloWorld"); helloP.addEventListener('click', helloWorld, false );
and then add a function like this: function helloWorld(e){ alert("Hello World");}
It's not all that hard except that you need to appreciate that Internet Explorer doesn't implement it that is!
Instead Internet Explorer uses attachEvent
and it behaves in a different manner. Say we wanted to get the ID of the element that was clicked in the above example. In most browsers we'd use an alert like this: alert("Hello World, you pressed the paragraph with the id of \""+e.target.id+"\".");
but internet explorer will get all confused and say that it doesn't understand target
... it does understand srcElement
though. At the beginning of our script we can check whether the helloWorld function can't understand target
by asking if(!e.target)
and it it doesn't then e.target
will become srcElement
thus: if(!e.target){e.target = e.srcElement;}
If course we've still got to add the listener in the first place so we could replace addEventListener
with a generic function which handles all the browser problems and I found one here, but I didn't like the shorthand of the variables it was using so refactored them to this:
function addEvent(element, type, listener, useCapture) { if (element.addEventListener) { element.addEventListener(type, listener, useCapture); return true; } else if (element.attachEvent) { return element.attachEvent('on' + type, listener); } else { element['on' + type] = listener; } }
So we've a cross browser way of adding listeners and a cross browser way of handling the result of the listener, cool ehh? If only IE would stop being such a pig!
Edit: It would seem that that isn’t all that’s needed, after reading this article on quirksmode I may well have to do some more work if I'm after anything other than the ID
of the element clicked!