问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

无法理解 addEventListener 中的 useCapture 参数

社区维基
1
新手上路，请多包涵

我已阅读 https://developer.mozilla.org/en/DOM/element.addEventListener 上的文章，但无法理解 useCapture 属性。定义有：

如果为真，useCapture 表示用户希望启动捕获。启动捕获后，指定类型的所有事件将被分派到已注册的侦听器，然后再分派到 DOM 树中它下面的任何 EventTargets。通过树向上冒泡的事件不会触发指定使用捕获的侦听器。

在此代码中，父事件在子事件之前触发，因此我无法理解其行为。文档对象具有 usecapture true，子 div 具有 usecapture 设置为 false，并且遵循文档 usecapture。那么为什么文档属性优于子对象。

 function load() {
  document.addEventListener("click", function() {
    alert("parent event");
  }, true);

  document.getElementById("div1").addEventListener("click", function() {
    alert("child event");
  }, false);
}

 <body onload="load()">
  <div id="div1">click me</div>
</body>

原文由 user26732 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptdomdom-events
阅读 615
2 个回答
得票最新
社区维基
1
✓ 已被采纳

事件可以在两种情况下被激活：开始时（“捕获”）和结束时（“泡泡”）。事件按照它们定义的顺序执行。比如说，你定义了 4 个事件监听器：

 window.addEventListener("click", function(){console.log(1)}, false);
window.addEventListener("click", function(){console.log(2)}, true);
window.addEventListener("click", function(){console.log(3)}, false);
window.addEventListener("click", function(){console.log(4)}, true);

日志消息将按以下顺序显示：

  • 2 （首先定义，使用 capture=true ）
  • 4 （定义第二个使用 capture=true ）
  • 1 （第一个定义事件 capture=false ）
  • 3 （第二个定义事件 capture=false ）

原文由 Rob W 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

我发现此图对于理解捕获/目标/冒泡阶段非常有用：http: //www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases

下面，从链接中提取的内容。

阶段

沿着从树的根到该目标节点的路径分派事件。然后它可以在目标节点级别本地处理，或者从树中更高层的任何目标的祖先处理。事件分派（也称为事件传播）分三个阶段发生，顺序如下：

  1. 捕获阶段：事件从树的根到目标节点的直接父节点被分派给目标的祖先。
  2. 目标阶段：事件被分派到目标节点。
  3. 冒泡阶段：事件从目标节点的直接父节点派发到目标的祖先到树的根。

使用 DOM 事件流在 DOM 树中分派的事件的图形表示

目标的祖先是在事件的初始分派之前确定的。如果在调度期间删除了目标节点，或者添加或删除了目标的祖先，则事件传播将始终基于目标节点和调度前确定的目标的祖先。

一些事件可能不一定完成 DOM 事件流的三个阶段，例如事件只能定义为一个或两个阶段。例如，本规范中定义的事件将始终完成捕获和目标阶段，但有些事件不会完成冒泡阶段（“冒泡事件”与“非冒泡事件”，另请参阅 Event.bubbles 属性）。

原文由 lax4mike 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题