Fatal编程技术网
  • javascript/
  • Javascript 已调度事件从捕获/气泡周期的哪个阶段开始？

Javascript 已调度事件从捕获/气泡周期的哪个阶段开始？

javascript dom browser

Javascript 已调度事件从捕获/气泡周期的哪个阶段开始？,javascript,dom,browser,Javascript,Dom,Browser,假设我有这个布局 <body> <div class="A"> <span class="B">span</span> </div> <body> 我将捕获事件侦听器分配给： div_class_A_element.addEventListener('custom',function(){ console.log('captured custom on A'); }, true); 当我点击B时会

假设我有这个布局

<body>
  <div class="A">
    <span class="B">span</span>
  </div>
<body>
我将捕获事件侦听器分配给：

div_class_A_element.addEventListener('custom',function(){ 
  console.log('captured custom on A'); 
}, true);
当我点击B时会发生什么？我需要一场接一场的比赛。另外，请不要告诉我只做jsfiddle，我知道我可以做到，但我想知道的是规范中说它应该做什么

以下是我的猜测：

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

调度的事件也要经过捕获阶段。根据w3c dom级别3规范：

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

这句话本身没有多大帮助，但规范继续解释了
dispatchEvent
（和内部实现）必须遵循的事件流：

  • 捕获阶段
  • 目标阶段
  • 气泡相

    • 捕获必须进行（除非通过
    stopperPagation（）
    停止）。可以通过将
    事件设置为
    false来跳过冒泡。冒泡
    
从树顶部到事件目标的EventTargets链
目标在事件初始分派之前确定。如果
在事件处理和事件流期间对树进行修改
将根据树的初始状态继续。
-
    
因此，在您的示例中，当您从B调度事件时，将调用A上的
    自定义
    事件处理程序
    
从MDN（在
    dispatchEvent
    上）：
    
将事件分派到事件系统中。该事件受
与直接调度的事件具有相同的捕获和冒泡行为。
-
    

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

  • .B点击
    • 

  • .点击
    • 

  • 身体咔哒声
    • 

  • 文档侦听器
    • 

  • 在地图上捕捉到了风俗
    • 

  • 窗口点击
    • 

    文档
    侦听器确实会立即触发
    A
    div调度，然后冒泡继续（到
    窗口
    ）
    哦，亲爱的。新的JSFIDLE字体比以前可读性差得多。感谢你的这把小提琴！我喜欢你指出的
    调度事件
    调用在原始事件冒泡之前完成。

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