Question

为什么以下代码会显示＆＃34; three＆＃34;然后＆＃34;两个＆＃34;然后＆＃34;一个＆＃34; （按此顺序）？它与功能或表格有关吗？我期待输出为一，二，三，而不是相反。

<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>

Answer 1

addEventListener监听事件冒泡阶段（即从DOM树的目标向上）的默认行为。如果你想听捕获阶段，你需要将第三个参数传递给true。

Docs

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

但默认情况下，使用冒泡阶段这意味着将首先通知与侦听器关联的更多深度元素，然后将通知与该同一侦听器关联的通知元素的最接近的祖先元素，依此类推... 而实际行为。

要使用具有相反行为的冒泡阶段行为，您必须将useCapture的第二个参数（EventTarget.addEventListener()）指定为true。来自官方documentation：

useCapture可选

一个布尔值，指示将调度此类型的事件   在被调度到任何EventTarget之前注册的侦听器   在DOM树下面。向上冒泡的事件   树不会触发指定使用捕获的侦听器。事件   冒泡和捕捉是传播事件的两种方式   在两个嵌套在另一个元素中的元素中   元素已为该事件注册了句柄。事件   传播模式决定了元素接收的顺序   事件

您可以这样更新方法：

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

为什么警报的顺序会逆转？

2 个答案: