个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>capture and bubble</title>
<style type="text/css">
#child{
background: red;
width:50px;
height:50px;
}
#father{
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<div id='father'>
<div id='child'></div>
</div>
</body>
<script type="text/javascript">
var parent = document.getElementById("father");
var child = document.getElementById('child');
var html = document.getElementsByTagName("html")[0];
var body = document.body;
parent.addEventListener("click",function() {
console.log("I am capturing parent");
},true);
parent.addEventListener("click",function() {
console.log("I am parent");
},false);
child.addEventListener("click",function() {
console.log("I am capturing child");
},true);
child.addEventListener("click",function() {
console.log("I am child");
},false);
body.addEventListener("click",function() {
console.log("I am capturing body");
},true);
body.addEventListener("click",function() {
console.log("I am body");
},false);
html.addEventListener("click",function() {
console.log("I am capturing html");
},true);
html.addEventListener("click",function() {
console.log("I am html");
},false);
parent.addEventListener("click",function() {
console.log("I am capturing parent");
},true);
parent.addEventListener("click",function() {
console.log("I am parent");
},false);
</script>
</html>
上面的html中包含了一个显示capture和bubble执行顺序的js，我为parent(div father)绑定(bind)了两次capture和bubble的监听器，为parent(div father)绑定(bind)了一对capture和bubble ) 是js脚本部分的第5行到第10行； parent(div father) 的另一对 capture 和 bubble 在 js 脚本部分的末尾。
点击绿色div(父div)，在控制台中获取结果。
test.html:50 I am capturing html
test.html:44 I am capturing body
test.html:32 I am capturing parent
test.html:35 I am parent
test.html:56 I am capturing parent
test.html:59 I am parent
test.html:47 I am body
test.html:53 I am html
为什么结果不是下面的？
test.html:50 I am capturing html
test.html:44 I am capturing body
test.html:32 I am capturing parent
test.html:56 I am capturing parent
test.html:35 I am parent
test.html:59 I am parent
test.html:47 I am body
test.html:53 I am html
请详细说明。
最佳答案
MDN documentation for addEventListener状态:
Note: For event listeners attached to the event target, the event is in the target phase, rather than the capturing and bubbling phases. Events in the target phase will trigger all listeners on an element in the order they were registered, regardless of the
useCaptureparameter.
这就是这里发生的事情。事件监听器附加到事件目标(在您的示例中为 parent)，因此事件处于目标阶段并且监听器按照它们注册的顺序触发。
请注意，如果您单击 child，这不会发生，因为该事件处于捕获或冒泡阶段。预期的结果是:
I am capturing html
I am capturing body
I am capturing parent
I am capturing parent
I am capturing child
I am child
I am parent
I am parent
I am body
I am html
事件流有很好的解释和图表here .
关于javascript - js中两个相同监听器的捕获和冒泡的执行顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50682584/
25
4
0
我在 Angular 项目中使用了来自 Github 的模块项目，它可以让我调整 DOM 元素的大小，这些元素绘制在 div 之上，充当绘图板。 为了塑造我的第一个元素(它们是简单的矩形)，顺便说一句
如何在类之间传递事件？ 我知道这听起来很荒谬(确实如此)，但在过去的一段时间里我一直被这个问题难倒了。搜索没有出现类似的问题，所以我想我会提出这个问题。 这里是涉及的对象: WinForm -> Sp
我在 class 中订阅了一个 Event。比如 MainStation mainStation = StationFactory.GetMainStation(); mainStation.Fre
当用户多次悬停(mouseenter)时如何防止冒泡或“失控”。当用户悬停时，我使用slideDown和slideUp作为mouseleave，并将延迟设置为250。只有当延迟设置为1毫秒时，我才能解
背景:我目前正在编写一个greasemonkey 脚本，用于嵌入/修改特定页面的html。该页面设置有 3 个嵌套 div。在这 3 个 div 中，我只能将事件监听器添加到最外面的 div(这是由于
想想 HTML5 服务器发送的事件(我在服务器端使用 php)。为了获取服务器发送的数据，我有以下代码: if(typeof(EventSource) !== "undefined") { v
我想禁用 SPA 路由器正文部分中所有具有“nolink”类的链接。为了实现这一点，我使用了事件委托(delegate)，它不能很好地处理嵌套元素。 (下面是简化的代码)。 HTML:
实验证据使我相信键(向上、向下、按下)事件只会触发(在气泡阶段)处于焦点的元素。 这种行为可能是直观的、明显的和/或可取的，但还没有在任何地方看到这种记录，所以我希望社区能够证实我的“理论”。 否则，
如果我有以下布局: public class A : INotifyPropertyChanged { public event PropertyChangedEventHandler Pro
我有几个带有随机数的 div，我后来使用一些简单的冒泡排序代码按升序排列，我想逐渐排列并为它们添加样式，而不是对它们进行样式设置并立即安排。 这感觉很简单，但我无法找到 sleep for 循环 或正
我已经用 Java 实现了所有四种排序算法。只是为了它，我决定查看每种算法中的交换次数和比较次数。对于大小为 20 的随机数组，这是我的结果 冒泡排序:87 次交换，87 次比较 插入排序:87 次交
所以根据MDN (这是有道理的)AnimationEvent 有 bubble 参数，但是如何将它设置为 true？考虑到该事件是从 CSS 动画触发的。 最佳答案 好吧，原来CSS是做冒泡事件的，例
我在 WPF WindowsFormsHost 中有 Winforms 控件。Winforms 控件是被动的，不能处理任何鼠标事件。鼠标事件应该像往常一样从 WPF 可视化树中最内部的 WPF 控件引
我有一个 iframe，它具有警报功能和 console.log 功能。 我能够看到 console.log 的输出，但是警报功能没有冒泡(永远不会以可见的方式触发)。 我尝试在 chromium 上
我有以下 html 设置: blaat blaat2 它的样式使您不能悬停 div1 而不悬停其他 2 个 div 之一。现在我在 div1 上有一个 mouseout。 问题是当我从 conte
最近学习了python基础，写一下3大排序练练手： 复制代码 代码如下: ''' Created on 2013-8-23 @author: codegeek
我正在处理一个内容可编辑的 div，我需要在将字符添加到 div 之前和之后捕获击键。 我对捕获与冒泡的理解是，事件首先在 dom 树的最高层捕获，然后向下传递，而对于冒泡，它从最低层开始，然后在树上
Demo Here 我想要实现的目标: 鼠标悬停时 - 将显示共享图标。 单击共享图标时，将显示新 Div 问题 当鼠标移出共享图标时“新 Div 不应关闭，必须显示”。 当大图像的 MouseOut
我知道我的问题是在 DOM 内冒泡，因为我的分页中有多个页面，当我多次单击编辑类链接时，它会冒泡并连续加载相同的文件，我想知道更好的解决这个问题的方法。 $('.edit').live('click'
我需要使用事件委托(delegate)捕获内部带有图像的 anchor 节点。 document.addEventListener( 'click', function(event) {
我是一名优秀的程序员,十分优秀！