为什么警报顺序颠倒了？

为什么下面的代码会显示“三个”，然后是“两个”，然后是“一个”（按此顺序）？这与功能或表格有关吗？我期待的输出是一，二，三，而不是相反。为什么警报顺序颠倒了？

<html> 
    <head> 
     <title>WebDev Exams</title>  
    </head> 
    <body> 
     <div id='one'> 
      <table> 
       <tr id='two'> 
        <td id='three'>Ce1111</td> 
       </tr> 
      </table> 
     </div> 
    </body> 
    <script type="text/javascript"> 
     function registerEvent(id) { 
      document.getElementById(id).addEventListener('click', function() 
      { 
       alert(id); 
      }); 
     } 
     registerEvent('one'); 
     registerEvent('two'); 
     registerEvent('three'); 
    </script> 
</html>

来源

2017-09-10 Stathis.S

https://www.quirksmode.org/js/events_order .html – Teemu

代码不会显示任何东西，直到有人点击一个元素，可能是表格单元格。 – RobG

DOM第3级事件和JavaScript事件顺序规范允许注册事件监听器要么在捕获或在冒泡阶段。

但默认情况下，使用冒泡阶段。
这意味着与听众相关联的更深度元素将首先被通知，然后与该同一听众相关联的被通知元素的最接近的祖先元素将被通知，等等......
虽然实际行为。

使用具有反向行为的冒泡阶段的行为，你必须指定的EventTarget.addEventListener()第二个参数（useCapture）到true。从官方documentation：

将useCapture可选

布尔表明这种类型的事件将在注册的监听器被分派到任何事件目标它下面的DOM树之前被分派到。通过冒泡的事件不会触发指定使用捕获的侦听器。事件鼓泡和捕获是传播在于嵌套在另一个元件之内，当两个元件已注册该事件的手柄的元件发生事件的方法有两种。事件传播模式决定的元件，其中接收所述事件顺序

你可以这样更新以这种方式方法：

function registerEvent(id) { 
    document.getElementById(id).addEventListener('click', function() 
    { 
     alert(id); 
    },true); 
}

来源

2017-09-10 10:18:56 davidxxx

为addEventListener默认行为收听事件冒泡相位（即，从目标向上DOM树）。如果你想听取捕捉阶段，你需要传递第三个参数为true。

Docs

target.addEventListener(type, listener[, useCapture]);

function registerEvent(id) { 
 
    document.getElementById(id).addEventListener('click', function() { 
 
    alert(id); 
 
    }, true); 
 
} 
 
registerEvent('one'); 
 
registerEvent('two'); 
 
registerEvent('three');

<body> 
 
    <div id='one'> 
 
    <table> 
 
     <tr id='two'> 
 
     <td id='three'>Ce1111</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</body>

来源

2017-09-10 10:00:43

为什么警报顺序颠倒了？

回答

相关问题