深入理解事件冒泡(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 到 JQuery (1)学习小结
Feb 12 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
js断点调试经验分享
Dec 08 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
js实现日历
Nov 07 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与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
json数据的列循环示例
2013/09/06 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
办公室年终个人自我评价
2013/10/28 职场文书
电子商务个人自荐信
2013/12/12 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
中职生自荐信范文
2014/06/15 职场文书
博士给导师的自荐信
2015/03/06 职场文书
看雷锋电影观后感
2015/06/10 职场文书