What's the difference between these two pieces of code:

dojo.addOnLoad(function() {
    dojo.connect(dijit.byId('mainTabContainer').tablist,
       'onButtonClick', tabClick);
});

and:

dojo.addOnLoad(function() {
    var container = dijit.byId("mainTabContainer");
    dojo.connect(container.tablist, 'onButtonClick', tabClick);
});

Nothing I hear you say? Well, I'd guess that as well. After all, the second simply sets a variable that is then used in the following line exactly as it was in the previous piece of code. Yet Internet Explorer (at least version 7 and 8) doesn't agree. It will fail on the second example.

Now my guess is that it is trying to do a pre-compile, and evaluating the first line at parsing, instead of when the function actually runs (which is after the onLoad event triggers). It certainly thinks that the variable container does not contain an attribute called tablist in the second version, but has no trouble finding it in the first. Now all I can say is WTF!?!

Every other browser treats both pieces of code as identical, yet IE consistently fails.