Rants
I’m a web developer and what does a web developer do? He tries to make a website work almost everywhere! 
Everywhere? According to w3schools browsers stats, the sum of the users of the 2 browsers is about 90% of the whole users, so yeah, everywhere.
Here is the problem: we generally love Firefox, we really do, because there are so many tools for make your life of debugging a website heaps easier than what it would be with other browsers.
A couple of examples? Of course Firebug and the Web Developer addons!
That’s why we generally start with Firefox to build a website, then we check it on Internet Explorer… and bam! Nothing works also if you write code/javascript following every single W3C standard.
So from that point on, developing will be more like crying blood tears to understand a common way to make things work in both the 2 main browsers user by the “internet population”.
But let’s not get into this, there would be too much to talk about, and it would be only a personal view anyway.
Let’s talk about the battle I had to win today…
Objective
I just had to do some pretty basic stuff with checkboxes.
Basically the webpage had a some content (that I couldn’t modify server side) and I had to add some events through javascript on some checkboxes, to be able to display/hide some parts inside the webpage, on check/uncheck action.
I had to obtain the same feature of a normal “onclick” like this:
<div id='myid' onclick='alert("you clicked me!")' />
… dynamically.
Events… what about them?
How everyone knows, Internet Explorer uses its own weird way of handling events… and yeah who says that I am right? W3C standards of course! 
(and anyway I’m carrying Firefox’s flag, so there we go 
)
Anyway going back to the point, everyone knows that there are two
types of event handling:
1) Firefox (W3C compatible):
myDomElement.addEventListener('eventType', function()
{
/* some stuff here */
}, bool
);
2) IE:
myDomElement.attachEvent('theirEventType', function()
{
/* some stuff here */
}
);
…and until here all good…
So a basic “browser detecting” would be something like:
if(window.addEventListener)
{
/* My W3C Friends */
}
else
{
/* Evil Browsers */
}
Then I’ve added my dirty little code on it… to attach events on the 2 browsers…
if(window.addEventListener)
{
myElement.addEventListener('click', function()
{
checkboxChange(this, my_array_of_fields);
}, false
);
}
else
{
myElement.attachEvent('onclick', function()
{
checkboxChange(this, my_array_of_fields);
}
);
}
As said before… I have a look at the result on Firefox… and all works fine… then I move to IE… and THUNDERSTORMS!
The above code (OF COURSE) doesn’t work!
Why? WHY???
After digging for a while I’ve figured out that the name of the object “this” passed to the function
checkboxChange(...)
was not the name of the object I was passing.
I couldn’t even get the right element through the ID, because of another problem there is with IE!
document.getElementById('myId')
IE gets confused, if you have the name of an element, equal to the id of another element and that (not my choice) was the case.
So there we go, we have to find another solution!
Solutions? Workarounds?
Of course the easiest way (and also browser indipendent) is… to use a library that someone “maybe smarter than you” wrote already
For example:
YAHOO one
YAHOO.util.Event.addListener(myElement, 'click', function()
{
checkboxChange(this, my_array_of_fields);
}
);
or my favorite one MooTools
myElement.addEvent('click', function()
{
checkboxChange(this, my_array_of_fields);
}
);
Figuring out that there weren’t other “onclick” events in the page for the element I was applying events on, I’ve decided to don’t use any external javascript library for this project.
I’ve used instead an anonymous function associated to the onclick event listener of my element as below:
myElement.onclick = function ()
{
checkboxChange(this, my_array_of_fields);
}
This… just for IE of course
For Firefox instead I’m still using the addEventListener!
Hopefully I’ve been helpful to someone with this article
See ya next!
Recent Comments