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

巴特西

html事件绑定总结以及window.onload和document.body.onload事件

最新文章

热门文章