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的事件处 ...
随机推荐
- 【BZOJ3991】[SDOI2015]寻宝游戏 树链的并+set
[BZOJ3991][SDOI2015]寻宝游戏 Description 小B最近正在玩一个寻宝游戏,这个游戏的地图中有N个村庄和N-1条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩 ...
- 九度OJ 1181:遍历链表 (链表、排序)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2733 解决:1181 题目描述: 建立一个升序链表并遍历输出. 输入: 输入的每个案例中第一行包括1个整数:n(1<=n<=1 ...
- CentOS7.1安装 Vsftpd FTP 服务器
# yum install vsftpd 安装 Vsftpd FTP 编辑配置文件 ‘/etc/vsftpd/vsftpd.conf’ 用于保护 vsftpd. # vi /etc/vsftpd/vs ...
- 16.Django提交表单
Django表单提交一共有三种方式: 1.不使用Django组件进行提交 2.使用django.forms.Form(所有表单类的父类)进行提交 3.使用django.forms.ModelForm( ...
- LeetCode:存在重复元素【217】
LeetCode:存在重复元素[217] 题目描述 给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 示例 ...
- 动态创建selectjs 操作select和option
1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); myS ...
- H5 input默认数字键盘,显示为密码格式
<P> <span class="yzname w25">银行密码</span> <input class="j_passwor ...
- java 获取pdf内容
1. 说明 将pdf中的文字读取处理还有一些限制:1. 文档的安全属性不能过于严格 2. 不能存在图片. 2. 直接贴相关的源码 有两种读取方式,maven对应的pom文件 <dependenc ...
- python_unittest详解
一 整体结构概览 unittest原名为PyUnit,是由java的JUnit衍生而来.对于单元测试,需要设置预先条件,对比预期结果和实际结果. 整体结构:unittest库提供了test cases ...
- Codeforces 455B A Lot of Games:博弈dp【多局游戏】
题目链接:http://codeforces.com/problemset/problem/455/B 题意: 给你n个字符串,然后进行k局游戏. 每局游戏开始有一个空串,然后双方轮流给这个串的末尾添 ...