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的事件处 ...
随机推荐
- EasyDSS视频点播服务器实现多分辨率/多码率无缝切换的办法
EasyDSS流媒体音视频直播与点播服务器软件,是一套提供一站式的转码.点播.直播.检索.回放.录像下载服务的高性能RTMP/HLS/HTTP-FLV流媒体服务,极大地简化了流媒体相关业务的开发和集成 ...
- 解决 SVN版本冲突
链接:http://blog.csdn.net/windone0109/article/details/4857044 版本冲突原因: 假设A.B两个用户都在版本号为100的时候,更新了kingtun ...
- 九度OJ 1343:城际公路网 (最小生成树)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:445 解决:178 题目描述: 为了加快城市之间的通行和物资流动速度,A国政府决定在其境内的N个大中型城市之间,增加修建K条公路.已知这N个 ...
- 九度OJ 1333:考研海报 (区间操作)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:738 解决:299 题目描述: sun是万千考研学子中的一员,他每天过着三点一线的生活. 学校里有一个公告栏,他每天都看到上面张贴着各种考研 ...
- 【学员管理系统】0x03 老师信息管理功能
[学员管理系统]0x03 老师信息管理功能 老师信息管理相比于学生信息管理又多了一点,因为我们的数据结构中老师表和班级表是通过teacher2class表进行多对多关联的. 写在前面 项目详细需求参见 ...
- linux 基础-变量,shell基本语法
变量 定义变量 your_name="runoob.com" #变量名和等号之间不能有空格 使用变量 your_name="qinjx" echo $your_ ...
- Linux中查找文件和文件内容的常用命令
一.whereis <程序名称> 查找软件的安装路径-b 只查找二进制文件 -m 只查找帮助文件-s 只查找源代码-u 排除指定类型文件-f 只显示文件名-B <目录> 在指定 ...
- HDU - 2701 Lampyridae Teleportae 【模拟】
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2701 题意 有一个萤火虫会闪现 一个人 也会闪现 给出 这个人的起始位置 和他能够闪现的距离 然后依次 ...
- 让你快速上手Runtime(转)
前言 本篇主要介绍Runtime在开发中的一些使用场景,顺便讲解了下MJExtension的底层实现.如果喜欢我的文章,可以关注我微博:袁峥Seemygo,也可以来小码哥,了解下我们的iOS培训课程. ...
- Google员工自述:在哈佛教书和在Google工作的差别
感谢伯乐在线的投递编者按:2003年到2010年期间,原文作者Matt Welsh 是哈佛大学工程和应用科学学院的计算机科学系教授.2010年加入Google,是一名高级工程师.他当前的工作重点是广域 ...