深入理解事件冒泡(Bubble)和事件捕捉(capture)


Posted in Javascript onMay 28, 2016

事件的发生顺序

假设在一个元素中又嵌套了另一个元素并且两者都有一个onClick事件处理函数(event handler)。如果用户单击元素2,则元素1和元素2的单击事件都会被触发。但是哪一个事件先被触发?哪一个事件处理函数会被首先执行?换句话说,事件的发生顺序到底如何?如下图是当点击span元素区域是,三个点击事件都会被触发,但是先后顺序是怎样的呢?

<div onclick="func1">
   <p onclick="func2">
     <span onclick=""func3>
     </span>
   </p>
 </div>

两种模型

对于这个事件的处理顺序上,Netscape和微软有两种截然不同的处理方法:

•Netscape主张事件会从最外层开始发生,直到最具体的元素,这种事件发生顺序被称为捕获型

•微软则保持事件从最内部元素开始发生,然后一直向上传播,这种事件顺序被称为冒泡型

这两种事件顺序是截然相反的。Explorer浏览器只支持冒泡事件,Mozilla,Opera7和Konqueror两者都支持。而更古老的opera和iCab两者都不支持

w3c

任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段。

对于正常的web开发,可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数,这是通过addEventListener()方法实现的,如果这个函数的useCapture参数是true,则在捕获阶段绑定函数,反之false,在冒泡阶段绑定函数。

element.addEventListener(event, function, useCapture)

阻止冒泡

在正常的开发过程中,如果想要阻止事件的传播,通过一个方法实现。

在微软的模型中,你必须设置事件的cancelBubble的属性为true

window.event.cancelBubble = true

在w3c模型中你必须调用事件的stopPropagation()方法

e.stopPropagation()

通过调用这些方法会阻止所有冒泡向外传播。跨浏览器解决方案:

function doSomething(e) {
  if (!e) {
    var e = window.event;
    e.cancelBubble = true;
  }
  if (e.stopPropagation) {
    e.stopPropagation();
  }
}

以上这篇深入理解事件冒泡(Bubble)和事件捕捉(capture)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 #Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 #Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 #Javascript
jQuery操作动态生成的内容的方法
May 28 #Javascript
javascript 用函数实现继承详解
May 28 #Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 #Javascript
jQuery实现布局高宽自适应的简单实例
May 28 #Javascript
You might like
php array_slice函数的使用以及参数详解
2008/08/30 PHP
PHPMailer安装方法及简单实例
2008/11/25 PHP
php 强制下载文件实现代码
2013/10/28 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
javascript操作JSON的要领总结
2012/12/09 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
详解详解Python中writelines()方法的使用
2015/05/25 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
关于python中remove的一些坑小结
2021/01/04 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
暂住证证明
2015/06/19 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
爱国主题班会教案
2015/08/14 职场文书