javascript – 為什麼點選設定innerHTML會在Chrome上觸發兩個解析事件?

使用Chrome開發者工具中的時間軸,我使用這一小段程式碼通過inner HTML

記錄事件:

<!DOCTYPE html>

<html>
<head>
  <script>
    function test(){
      var wrap = document.getElementById('wrapper');
      wrap.innerHTML = "test";
    }
  </script>
</head>

<body>
  <input type="button" value="click" onClick="test();"/>
  <div id="wrapper"></div>
</body>
</html>

我可以看到,一旦執行測試方法,就會觸發兩個解析事件:

我使用的是Chrome版本23.0.1271.64 m

這是預期的嗎?這是Chrome開發人員工具中的錯誤嗎?或者Chrome下有什麼需要改進的地方?

經過一段時間的遊戲,我猜這與Chrome需要解析字串“test”然後重新解析頁面,或者可能只是在新增字串後的“wrap”元素有關. innerHTML是一個奇怪的函式,因為它允許新增任何內容,因此必須進行一些驗證/解析.

有點說明,如果你改變你的功能:

function test() {
    var wrap = document.getElementById('wrapper');
    var newtext = document.createTextNode("test");
    wrap.appendChild(newtext);
}

…然後根本不會發生任何解析事件.

翻譯自:https://stackoverflow.com/questions/13335999/why-does-a-click-setting-innerhtml-trigger-two-parsing-events-on-chrome