JavaScript load event execution sequence

I have the following code:

//create a tab and active it
var tab = gBrowser.addTab("chrome://xxx/content/html/xxx.html");
gBrowser.selectedTab = tab
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
newTabBrowser.addEventListener("load", function () {
    //event 1.          
    }, true);

where xxx.html has:

<script>
$(document).ready(function(){
        //event 2
});
$(window).load(function(){
    //event 3
});
</script>

I understand that event 2 is fired before event 3. And event 1 is fired before event 3 by place a a开发者_如何转开发lert(), can anyone explain me the reason of this. Or the sequence of 1 and 3 are unpredicted.

Not quite sure about exactly what event 1 is - I'm guessing this is a Firefox plugin so it's actually triggering as soon as the tab itself loads rather than the document inside it.

Event 2 will fire as soon as the complete HTML DOM is ready, but before all external resources load (such as images and stylesheets). Event 3 will only fire when all external resources have completed loading.