为什么点击设置innerHTML会在Chrome上触发两个解析事件？ [英] Why does a click setting innerHTML trigger two parsing events on Chrome?
问题描述
在Chrome开发人员工具中使用时间轴，我使用这段代码通过 innerHTML 记录事件： <！DOCTYPE html>
< html>
< head>
< script>
function test（）{
var wrap = document.getElementById（'wrapper'）;
wrap.innerHTML =test;
}
< / script>
< / head>
< body>
< input type =buttonvalue =clickonClick =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）;
}
...然后根本没有解析事件发生。
Using the Timeline in the Chrome Developer Tools, I used this small piece of code to record events through 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>
And I can see that there are two parsing events fired once the test method is run :
I am using Chrome Version 23.0.1271.64 m
Is it something expected ? Is it a bug from the Chrome Developer Tools ? or is there something to improve under Chrome ?
After a bit of playing around I would guess that this has something to do with Chrome needing to parse the string "test" and then re-parse the page, or possibly just the "wrap" element after the string has been added. innerHTML is a curious function because it allows the addition of any content whatsoever, so some validation/parsing has to occur.
It is somewhat telling that if you change your function to this :
function test() {
var wrap = document.getElementById('wrapper');
var newtext = document.createTextNode("test");
wrap.appendChild(newtext);
}
...then no parse events occur at all.
这篇关于为什么点击设置innerHTML会在Chrome上触发两个解析事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
