深入理解事件冒泡(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 相关文章推荐
列表内容的选择
Jun 30 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 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
PHP7之Mongodb API使用详解
2015/12/26 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
Python 爬虫多线程详解及实例代码
2016/10/08 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
Django单元测试工具test client使用详解
2019/08/02 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
Python continue语句实例用法
2020/02/06 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
创业计划书撰写原则
2014/01/25 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript