js之事件冒泡和事件捕获详细介绍


Posted in Javascript onOctober 28, 2013

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

  IE 5.5: div -> body -> document

  IE 6.0: div -> body -> html -> document

  Mozilla 1.0: div -> body -> html -> document -> window

(2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

(3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

  DOM事件模型最独特的性质是,文本节点也触发事件(在IE中不会)。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行,所以把在处理事件时把useCapture设置为false是比较安全,也实现兼容浏览器的效果。

js之事件冒泡和事件捕获详细介绍

事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

假设一个元素div,它有一个下级元素p。
<div>

<p>元素</p>
</div>
这两个元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么?
 
两种模型
以前,Netscape和Microsoft是不同的实现方式。

Netscape中,div先触发,这就叫做事件捕获。

Microsoft中,p先触发,这就叫做事件冒泡。

两种事件处理顺序刚好相反。IE只支持事件冒泡,Mozilla, Opera 7 和 Konqueror两种都支持,旧版本的Opera's 和 iCab两种都不支持 。

事件捕获
当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。

事件冒泡
当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。

W3C模型
W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

传统绑定事件方式
在一个支持W3C DOM的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。

ele.onclick = doSomething2

IE浏览器
如上面所说,IE只支持事件冒泡,不支持事件捕获,它也不支持addEventListener函数,不会用第三个参数来表示是冒泡还是捕获,它提供了另一个函数attachEvent。

ele.attachEvent("onclick", doSomething2);

附:事件冒泡(的过程):事件从发生的目标(event.srcElement||event.target)开始,沿着文档逐层向上冒泡,到document为止。

事件的传播是可以阻止的:
• 在W3c中,使用stopPropagation()方法
• 在IE下设置cancelBubble = true;
在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~
3.阻止事件的默认行为,例如click <a>后的跳转~
• 在W3c中,使用preventDefault()方法;
• 在IE下设置window.event.returnValue = false;
4.哇,终于写完了,一边测试一边写的额,不是所有的事件都能冒泡,例如:blur、focus、load、unload,(这个是从别人的文章里摘过来的,我没测试)。

Javascript 相关文章推荐
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
vue-router传参用法详解
Jan 19 Javascript
在JavaScript中如何使用宏详解
May 06 Javascript
javascript抖动元素的小例子
Oct 28 #Javascript
replace()方法查找字符使用示例
Oct 28 #Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 #Javascript
Document:getElementsByName()使用方法及示例
Oct 28 #Javascript
JS截取字符串常用方法详细整理
Oct 28 #Javascript
js自动生成对象的属性示例代码
Oct 28 #Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 #Javascript
You might like
php 数组的一个悲剧?
2011/05/11 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
js实现网页随机验证码
2020/10/19 Javascript
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python字符串string的内置方法实例详解
2018/05/14 Python
django如何通过类视图使用装饰器
2019/07/24 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
python爬取招聘要求等信息实例
2020/11/20 Python
MIS软件工程师的面试题
2016/04/22 面试题
电气工程师岗位职责
2014/01/01 职场文书
单位成立周年感言
2014/01/26 职场文书
学生鉴定评语大全
2014/05/05 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
房屋出租委托书格式
2014/09/23 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
写给老婆的保证书
2015/02/27 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers