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事件的更多相关文章
- js事件绑定及深入
学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...
- JavaScript事件---事件绑定和深入
发文不易,转载传播,请亲注明链接出处,谢谢! 内容提纲: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他内容 事件绑定分为两种:一种是传统事件绑定(内联模型, ...
- JavaScript的事件绑定及深入
事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定 (DOM2 级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一.传统事件绑定的问题传统事件绑定有内联模型 ...
- d3可视化实战04:事件绑定机制
首先说明,d3支持所有的JS事件——甚至其他代码的自定义事件.这里有一个列表,The MDN Event Reference, 包含了几乎所有浏览器创建的事件类型.大家有需要可以去查看. D3的事件绑 ...
- 第一百二十一节,JavaScript事件绑定及深入
JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...
- JavaScript(第二十五天)【事件绑定及深入】
事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一.传统事件绑定的问题 传统事件绑定有内联模型 ...
- 详解javascript事件绑定使用方法
由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所 ...
- JS基础——事件绑定
上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
随机推荐
- tomcat日志按天切分
1. 下载工具cronolog wget http://cronolog.org/download/cronolog-1.6.2.tar.gz 这是网上流传的下载地址,好像没用,所以需要自己去网上找. ...
- 【python】-- pymsql 操作MySQL
pymysql 对MySQL数据库进行简单数据操作python模块主要是:MySQLdb.pymsql,MySQLdb模块主要用于python2.X,而python3.X则使用pymsql,pymys ...
- linux 中 开放端口,以及防火墙的相关命令
最近公司需要在 生产环境上线系统,碰到一些防火墙以及开放端口的问题,在此来 复习mark下 1.设定 [root@localhost ~]# /sbin/iptables -I INPUT - ...
- struts2中的ModelDriven使用
http://www.cnblogs.com/Topless/archive/2012/01/17/2324980.html 例子都为struts2中的文档例子 JSP提交数据: <s:fo ...
- RLearning第1弹:初识R语言
R作为一种统计分析软件,是集统计分析与图形显示于一体的.体积小.开源.很强的互动性.自从学了R本人就很少再用matlab了... 一.R语言由函数和赋值构成. R使用<-(最好养成使用习惯),而 ...
- 说说JavaScript 中的new吧
在其他语言中,new操作符都是用来实例化创建一个对象的,JavaScript 中同样如此,但是它又有一些不同.为了说清楚这个问题我们先来看一下JavaScript 中的类.原型.原型链.继承这些概念吧 ...
- JSON for java
一.JSON介绍 JSON(JavaScript Object Notation),类似于XML,是一种数据交换格式,比如Java产生了一个数据想要给JavaScript,则除了利用XML外,还可以利 ...
- 在linux系统下Git源码系统的文件下载
Git是一个开源的分布式版本控制系统,在linux系统中下载git中的文件使用repo的很多. 网上有很多repo下载的地址失效,目前可用的链接在这里记录一下. 没有安装git的安装一下: sudo ...
- jQuery图片水平滑动延迟加载动画
在线演示 本地下载
- 解决COMODO Internet Security更新慢或失败的问题
方法一: COMODO 默认更新服务器只有一个:http://download.comodo.com/ 我电信网络更新速度非常慢: 实在没有办法了,找到了几个更新服务器: http://eu1.dow ...