//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事件的更多相关文章

  1. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

  2. JavaScript事件---事件绑定和深入

    发文不易,转载传播,请亲注明链接出处,谢谢! 内容提纲: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他内容 事件绑定分为两种:一种是传统事件绑定(内联模型, ...

  3. JavaScript的事件绑定及深入

     事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定 (DOM2 级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一.传统事件绑定的问题传统事件绑定有内联模型 ...

  4. d3可视化实战04:事件绑定机制

    首先说明,d3支持所有的JS事件——甚至其他代码的自定义事件.这里有一个列表,The MDN Event Reference, 包含了几乎所有浏览器创建的事件类型.大家有需要可以去查看. D3的事件绑 ...

  5. 第一百二十一节,JavaScript事件绑定及深入

    JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...

  6. JavaScript(第二十五天)【事件绑定及深入】

    事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能.   一.传统事件绑定的问题 传统事件绑定有内联模型 ...

  7. 详解javascript事件绑定使用方法

    由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所 ...

  8. JS基础——事件绑定

    上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...

  9. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

随机推荐

  1. tomcat日志按天切分

    1. 下载工具cronolog wget http://cronolog.org/download/cronolog-1.6.2.tar.gz 这是网上流传的下载地址,好像没用,所以需要自己去网上找. ...

  2. 【python】-- pymsql 操作MySQL

    pymysql 对MySQL数据库进行简单数据操作python模块主要是:MySQLdb.pymsql,MySQLdb模块主要用于python2.X,而python3.X则使用pymsql,pymys ...

  3. linux 中 开放端口,以及防火墙的相关命令

    最近公司需要在 生产环境上线系统,碰到一些防火墙以及开放端口的问题,在此来 复习mark下   1.设定   [root@localhost ~]# /sbin/iptables -I INPUT - ...

  4. struts2中的ModelDriven使用

    http://www.cnblogs.com/Topless/archive/2012/01/17/2324980.html 例子都为struts2中的文档例子 JSP提交数据:   <s:fo ...

  5. RLearning第1弹:初识R语言

    R作为一种统计分析软件,是集统计分析与图形显示于一体的.体积小.开源.很强的互动性.自从学了R本人就很少再用matlab了... 一.R语言由函数和赋值构成. R使用<-(最好养成使用习惯),而 ...

  6. 说说JavaScript 中的new吧

    在其他语言中,new操作符都是用来实例化创建一个对象的,JavaScript 中同样如此,但是它又有一些不同.为了说清楚这个问题我们先来看一下JavaScript 中的类.原型.原型链.继承这些概念吧 ...

  7. JSON for java

    一.JSON介绍 JSON(JavaScript Object Notation),类似于XML,是一种数据交换格式,比如Java产生了一个数据想要给JavaScript,则除了利用XML外,还可以利 ...

  8. 在linux系统下Git源码系统的文件下载

    Git是一个开源的分布式版本控制系统,在linux系统中下载git中的文件使用repo的很多. 网上有很多repo下载的地址失效,目前可用的链接在这里记录一下. 没有安装git的安装一下: sudo ...

  9. jQuery图片水平滑动延迟加载动画

    在线演示 本地下载

  10. 解决COMODO Internet Security更新慢或失败的问题

    方法一: COMODO 默认更新服务器只有一个:http://download.comodo.com/ 我电信网络更新速度非常慢: 实在没有办法了,找到了几个更新服务器: http://eu1.dow ...