1

假设我有这个布局

<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 它，我知道我可以做到，但我想知道的是规范说它应该做什么？

这是我的猜测：

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

4

2 回答 2

3

分派的事件也会经历一个捕获阶段。根据 w3c dom 3 级规范：

应用程序可以使用 EventTarget.dispatchEvent() 方法分派事件对象，并且实现必须像通过此方法一样分派事件对象。-来源

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

  1. 捕获阶段
  2. 目标阶段
  3. 泡沫阶段

W3C：事件流

必须进行捕获（除非它被 停止stopPropagation()。可以通过设置Event.bubbles来跳过冒泡false。

从树的顶部到事件目标的 EventTargets 链是在事件的初始分派之前确定的。如果在事件处理过程中对树进行了修改，则事件流将根据树的初始状态进行。-来源

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

来自 MDN（上dispatchEvent）：

将事件分派到事件系统中。该事件与直接分派的事件具有相同的捕获和冒泡行为。-来源

于 2013-01-06T05:03:32.543 回答
0

如果您的场景中的每个元素都有事件，则此演示会显示操作顺序。

  1. .B 点击
  2. .点击
  3. 身体点击
  4. 文档监听器
  5. 在 A 上捕获的自定义
  6. 窗口点击

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

于 2013-01-06T05:25:56.583 回答