在以下示例代码中,我将onclick事件处理程序附加到包含文本“ foo”的范围。该处理程序是一个匿名函数,会弹出一个alert()。
onclick
alert()
但是,如果我将其分配给父节点的innerHTML,则此onclick事件处理程序将被销毁-单击“ foo”将无法弹出警报框。
innerHTML
这个可以解决吗?
<html> <head> <script type="text/javascript"> function start () { myspan = document.getElementById("myspan"); myspan.onclick = function() { alert ("hi"); }; mydiv = document.getElementById("mydiv"); mydiv.innerHTML += "bar"; } </script> </head> <body onload="start()"> <div id="mydiv" style="border: solid red 2px"> <span id="myspan">foo</span> </div> </body> </html>
不幸的是,innerHTML即使您尝试附加,分配给也会导致所有子元素的破坏。如果要保留子节点(及其事件处理程序),则需要使用DOM函数:
function start() { var myspan = document.getElementById("myspan"); myspan.onclick = function() { alert ("hi"); }; var mydiv = document.getElementById("mydiv"); mydiv.appendChild(document.createTextNode("bar")); } function start() { var myspan = document.getElementById("myspan"); myspan.onclick = function() { alert ("hi"); }; var mydiv = document.getElementById("mydiv"); var newcontent = document.createElement('div'); newcontent.innerHTML = "bar"; while (newcontent.firstChild) { mydiv.appendChild(newcontent.firstChild); } }