Question

假设我有这个布局

<body>
  <div class="A">
    <span class="B">span</span>
  </div>
<body>

我将每个地方的点击转换为自定义事件，并使用委派的非捕获处理程序将其分发到其原始目标：

document.addEventListener('click',function(e){ 
  e.target.dispatchEvent(new CustomEvent('custom'));
}, false);

我将捕获事件监听器分配给A：

div_class_A_element.addEventListener('custom',function(){ 
  console.log('captured custom on A'); 
}, true);

点击B后会发生什么？我需要一个游戏。另外请不要告诉我只是jsfiddle它，我知道我可以做到这一点，但我想知道的是规范说它应该做什么？

这是我的猜测：

一旦click事件从文档一直向下移动到B然后一直返回到文档，文档的委托处理程序就在B上运行。现在发生了什么我不知道：它在B上调度自定义事件：自定义事件是否从B开始并开始冒泡？如果是这样，那么A的捕获处理程序将不会运行（因为捕获处理程序在冒泡阶段不会捕获）。或者，派遣事件的运行方式与其他事件完全相同，并从文档开始执行整个捕获阶段？

Answer 1

调度事件也会经历捕获阶段。根据w3c dom 3级规范：

应用程序可以使用。分派事件对象 EventTarget.dispatchEvent（）方法和实现必须分派事件对象就像通过这种方法一样。 - source

该引用本身并没有多大帮助，但该规范继续解释dispatchEvent（以及内部实现）必须遵循的事件流：

捕获阶段
目标阶段
泡沫阶段

W3C: Event Flow

捕获必须（除非stopPropagation()停止。通过将Event.bubbles设置为false，可以跳过冒泡。

从树顶到事件的EventTargets链目标是在事件的初始发送之前确定的。如果在事件处理，事件流程期间对树进行修改将根据树的初始状态继续进行。 - source

因此，在您的示例中，当您从B调度事件时，将调用A 上的custom事件处理程序。

来自MDN（dispatchEvent）：

将事件调度到事件系统中。该活动受制于与直接调度的事件相同的捕获和冒泡行为。 - source

Answer 2

如果您的方案中的每个元素都有事件，则demo会显示操作顺序。

.B点击
。点击
正文点击
文档监听器
在A
窗口单击

document侦听器会立即触发A div调度，然后继续冒泡（到window）

调度事件的捕获/泡沫循环的哪个阶段开始？

2 个答案: