html事件綁定總結以及window.onload和document.body.onload事件

//1 document.onkeydown若是屢次監聽一樣的事件，那麼前面的監聽函數都會被最後一次的監聽函數所覆蓋。
//以下所示：
document.onkeydown = function(evt) {
alert(9);
};
document.onkeydown = function(evt) {
alert(8);
};
//結果是8

 

//2 document.onkeydown和document.body.onkeydow上下級事件處理邏輯
//以下所示：
document.onkeydown = function(evt) {
alert(9);
};
document.body.onkeydown = function(evt) {
alert(8);
};
//結果是先8後9--事件冒泡執行--上述事件綁定和下面的處理方式是同樣的
document.addEventListener("keydown", function() {
alert(9);
}, false);
document.body.addEventListener("keydown", function() {
alert(8);
}, true);
//target.addEventListener(evtType, callbackFunc,useCapture);
//evtType--target的事件名字-必須是"keydown",而不是"onkeydown"
//callbackFunc--事件觸發函數
//useCapture--是不是捕獲型事件,默認是false--若是是false，則是冒泡型事件
//##但若是採用該方式來監聽對象事件，那麼若是是相似於上述1中綁定了相同事件，那麼不會被後續的函數覆蓋，而是那些已綁定的事件都有觸發！
//##並且，這時候那些相同的監聽函數，都是從先到後來執行的，也就是相似於隊列(先進先出)，而不是棧(先進後出)；也就是這時候第三個參數useCapture就不起做用了。

 

//3 window.onload--頁面上全部的DOM，樣式表，腳本，圖片，flash都已經加載完成了--也就是load的時間(打開devtools-network-load)

 

//4 document.onload/document.body.onload--僅當DOM加載完成，不包括樣式表，圖片，flash--也就是DOMContentLoaded的時間(打開devtools-network-DOMContentLoaded)

演示例子：http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html

 

參考文章：

http://www.cnblogs.com/hh54188/archive/2013/03/01/2939426.html