爲什麼警報順序顛倒了？

爲什麼下面的代碼會顯示「三個」，然後是「兩個」，然後是「一個」（按此順序）？這與功能或表格有關嗎？我期待的輸出是一，二，三，而不是相反。爲什麼警報順序顛倒了？

<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

爲什麼警報順序顛倒了？

回答

相關問題