Javascript 为什么单击设置innerHTML会在Chrome上触发两个解析事件?
使用Chrome开发者工具中的时间线,我使用这段代码通过innerHTML记录事件:Javascript 为什么单击设置innerHTML会在Chrome上触发两个解析事件?,javascript,html,google-chrome,google-chrome-devtools,Javascript,Html,Google Chrome,Google Chrome Devtools,使用Chrome开发者工具中的时间线,我使用这段代码通过innerHTML记录事件: <!DOCTYPE html> <html> <head> <script> function test(){ var wrap = document.getElementById('wrapper'); wrap.innerHTML = "test"; } </script> </head>
<!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>
功能测试(){
var wrap=document.getElementById('wrapper');
wrap.innerHTML=“测试”;
}
我可以看到,一旦测试方法运行,就会触发两个解析事件:
我使用的是Chrome版本23.0.1271.64 m
这是意料之中的事吗?这是来自Chrome开发者工具的bug吗?或者Chrome下有什么需要改进的吗?经过一段时间的尝试后,我猜这与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解析器。