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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
Node学习记录之cluster模块
May 31 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
python中二维阵列的变换实例
2014/10/09 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
python实现大文本文件分割
2019/07/22 Python
简单了解如何封装自己的Python包
2020/07/08 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
经典洗发水广告词
2014/03/13 职场文书
机关职员工作检讨书
2014/10/23 职场文书
万里长城导游词
2015/01/30 职场文书
尼克胡哲观后感
2015/06/08 职场文书
养成教育工作总结
2015/08/13 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
MongoDB 常用的crud操作语句
2021/06/20 MongoDB