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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
JavaScrip数组去重操作实例小结
Jun 20 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
Vue如何实现监听组件原生事件
Jul 03 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
twig里使用js变量的方法
2016/02/05 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
Python GAE、Django导出Excel的方法
2008/11/24 Python
Python验证企业工商注册码
2015/10/25 Python
python下载图片实现方法(超简单)
2017/07/21 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python如何判断IP地址合法性
2020/04/05 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
大学生找工作推荐信范文
2013/11/28 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
导游词之唐山景点
2019/12/18 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
微信小程序基础教程之echart的使用
2021/06/01 Javascript
Python实现生成bmp图像的方法
2021/06/13 Python
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS