gpt4 book ai didi

javascript - 分派(dispatch)事件在捕获/冒泡周期的哪个阶段开始?

转载 作者:行者123 更新时间:2023-11-30 18:12:41 29 4
gpt4 key购买 nike

假设我有这个布局

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

我将无处不在的点击转换为自定义事件,并使用委托(delegate)的非捕获处理程序将其分派(dispatch)到其原始目标:

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,然后一路返回到文档,文档的委托(delegate)处理程序就会在 B 上运行。现在我不知道会发生什么:它在 B 上调度自定义事件:自定义事件是否从 B 开始并开始冒泡?如果是这样,那么 A 的捕获处理程序将不会运行(因为捕获处理程序在冒泡阶段不会捕获)。还是分派(dispatch)的事件会像其他事件一样运行,并通过从文档开始来完成整个捕获阶段?

最佳答案

调度的事件也会经历一个捕获阶段。根据 w3c dom 级别 3 规范:

Applications may dispatch event objects using the EventTarget.dispatchEvent() method, and implementations must dispatch event objects as if through this method. - source

这句话本身并没有多大帮助,但规范继续解释了dispatchEvent(和内部实现)必须遵循的事件流:

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

W3C: Event Flow

捕获必须发生(除非它被stopPropagation()停止。可以通过将Event.bubbles设置为来跳过冒泡>假

The chain of EventTargets from the top of the tree to the event's target is determined before the initial dispatch of the event. If modifications occur to the tree during event processing, event flow will proceed based on the initial state of the tree. - source

因此在您的示例中,当您从 B 发送事件时,A 上的自定义 事件处理程序被调用。

来自 MDN(关于 dispatchEvent):

Dispatches an event into the event system. The event is subject to the same capturing and bubbling behavior as directly dispatched events. - source

关于javascript - 分派(dispatch)事件在捕获/冒泡周期的哪个阶段开始?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14179408/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com