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的事件处 ...
随机推荐
- 【BZOJ2806】[Ctsc2012]Cheat 广义后缀自动机+二分+单调队列优化DP
[BZOJ2806][Ctsc2012]Cheat Description Input 第一行两个整数N,M表示待检查的作文数量,和小强的标准作文库的行数接下来M行的01串,表示标准作文库接下来N行的 ...
- 注册会计师带你用Python进行探索性风险分析(一)
https://blog.csdn.net/BF02jgtRS00XKtCx/article/details/78519378
- 如何更改CSDN博客高亮代码皮肤的样式,使博客看起来更有范(推荐)
由于本人写博客的时候,也没有配置博客的相关属性,因此贴出来的代码块都是CSDN默认的,因此代码背景色都是白色的,如下所示: 但是本人在浏览他人博客的时候,发现有些博客的代码块看起来比较有范,整个代码库 ...
- Python锁
# coding:utf-8 import threading import time def test_xc(): f = open("test.txt","a&quo ...
- Js编写的菜单树
只需要提供这种JSON格式就ok了 其他的都可以直接引用这个代码进去 var testMenu=[ { "name": "一级菜单", "submen ...
- git push问题 objects/pack/tmp_pack_XXXXXX': Permission denied
1.上传时的权限问题 在执行git push origin master之后,上传过程中报出如下错误: objects/pack/tmp_pack_XXXXXX': Permission denied ...
- OpenCV编程->RGB直方图统计
我们在处理彩色图像时.特别是在做局部图像的阈值切割时,须要一个直观的RGB统计图. 接下来開始实现. 代码: void CalcHistRGB() { IplImage* img_sou ...
- oracle decode 用法
含义解释: decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译值1)ELSIF 条件=值2 THEN ...
- ABAP table control例子
[转自]http://blog.csdn.net/lhx20/article/details/3039909Table control用于在screen上以表格的形式显示数据,在table contr ...
- C#泛型命名潜规则
public class List<T>{} public class LinkedList<T>{} public class SortedList<TKey,TVal ...