为啥点击设置innerHTML会触发Chrome上的两个解析事件？
Posted
技术标签:
【中文标题】为啥点击设置innerHTML会触发Chrome上的两个解析事件？【英文标题】：Why does a click setting innerHTML trigger two parsing events on Chrome?为什么点击设置innerHTML会触发Chrome上的两个解析事件？ 【发布时间】：2012-10-31 10:06:43 【问题描述】：使用 Chrome 开发者工具中的时间轴，我用这小段代码通过 innerHTML 记录事件：
<!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 下有什么需要改进的地方？
【问题讨论】：
Why appendChild triggers Recalculate Style whereas setting innerHTML don't on Chrome?的可能重复 【参考方案1】：玩了一会儿后，我猜这与 Chrome 需要解析字符串“test”然后重新解析页面有关，或者可能只是添加字符串后的“wrap”元素. innerHTML 是一个奇怪的函数，因为它允许添加任何内容，因此必须进行一些验证/解析。
如果你把你的函数改成这样，这有点说明问题：
function test()
var wrap = document.getElementById('wrapper');
var newtext = document.createTextNode("test");
wrap.appendChild(newtext);
...那么根本不会发生解析事件。
【讨论】：
根本没有解析事件，因为createTextNode()和appendChild() after类似于wrap.textContent = 'test'，不会触发HTML解析器。以上是关于为啥点击设置innerHTML会触发Chrome上的两个解析事件？的主要内容，如果未能解决你的问题，请参考以下文章
JS中使用innerHTML后元素的onclick事件为啥不能触发了？