javascript的问题，onclick只触发一次，为什么？
碰到一个棘手的问题，发到首页大家帮忙看一下。下面的代码用两个方式添加事件，但是不管怎么添加，按钮的onclick只会触发一次，第二次点击的时候就没有反应了。如果将document.body.innerHTML="..."换成alert("..."),居然又可以了，很奇怪，为什么？
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>javascript事件</title>
</head>
<body>
<input type="button" id="btn3" value="按钮3" />
<br />
</body>
<script type="text/javascript">
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
document.body.innerHTML += "btn3 clicked! <br />";
}
if(document.all){
btn3.attachEvent("onclick",function(){document.body.innerHTML += "btn3 clicked! <br />";})
} else {
btn3.addEventListener("click",function(){document.body.innerHTML += "btn3 clicked! <br />"},false);
}
</script>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>javascript事件</title>
</head>
<body>
<input type="button" id="btn3" value="按钮3" />
<br />
</body>
<script type="text/javascript">
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
document.body.innerHTML += "btn3 clicked! <br />";
}
if(document.all){
btn3.attachEvent("onclick",function(){document.body.innerHTML += "btn3 clicked! <br />";})
} else {
btn3.addEventListener("click",function(){document.body.innerHTML += "btn3 clicked! <br />"},false);
}
</script>
</html>
刚才在csdn上提问，发现了出问题的地方。
因为innerHTML是重新加载html，一些动态绑定的事件或样式都失效了。
所以在调用innerHTML后html被重新加载，绑定的事件就不见了。
修改方法：不要使用innerHTML，改为使用下面的方法：
document.body.appendChild(document.createTextNode("btn3 clicked! "));
document.body.appendChild(document.createElement("<br />"));
document.body.appendChild(document.createElement("<br />"));
浙公网安备 33010602011771号