深入理解事件冒泡(Bubble)和事件捕捉(capture)
事件的发生顺序
假设在一个元素中又嵌套了另一个元素并且两者都有一个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)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章介绍了JS模拟自动点击的简单实例，有需要的朋友可以参考一下2013-08-08
这篇文章主要为大家详细介绍了H5用户注册表单页的相关代码，注册模态框，如何设计用户注册表单页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了JavaScript数组对象和字符串对象，文章中有详细的代码示例，对学习或工作有一定的帮助，需要的小伙伴可以参考一下2023-04-04
js-cookie是一个用于处理浏览器Cookie的JavaScript库,本文通过实例代码讲解JS设置缓存和缓存过期时间的操作方法,感兴趣的朋友跟随小编一起看看吧2025-01-01
这篇文章主要介绍了JavaScript实现点击文字切换登录窗口的方法,涉及javascript操作div层及相关样式的技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JS获取多维数组中相同键的值实现方法,结合实例形式分析了JS数组遍历、判断、键值获取等操作技巧,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了重置Redux的状态数据的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了js实现的二级横向菜单条,是非常美观简洁的二级导航条效果,可实现针对鼠标事件的动态响应及页面样式切换功能,简单实用,需要的朋友可以参考下2015-08-08
Relative是position的一个属性，是相对定位，通过本篇文章给大家介绍Position属性之relative用法，对position属性relative相关知识感兴趣的朋友一起学习吧2015-12-12
javascript设计模式 – 迭代器模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 迭代器模式原理与用法,结合实例形式分析了javascript迭代器模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
最新评论