深入理解事件冒泡(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 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 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 删除记录实现代码
2009/03/12 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
Node爬取大批量文件的方法示例
2019/06/28 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python实现股市信息下载的方法
2015/06/15 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
驾驶员岗位职责
2014/01/29 职场文书
函授药学自我鉴定
2014/02/07 职场文书
公司保密承诺书
2014/03/27 职场文书
中学生操行评语大全
2014/04/24 职场文书
开学典礼策划方案
2014/05/28 职场文书
暑期培训班策划方案
2014/08/26 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
机关作风建设自查报告
2014/10/22 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
提档介绍信范文
2015/10/22 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript