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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM