JavaScript是否可以在不破坏子体事件侦听器的情况下附加到innerHTML？

一尘不染

JavaScript是否可以在不破坏子体事件侦听器的情况下附加到innerHTML？

javascript

在以下示例代码中，我将onclick事件处理程序附加到包含文本“ foo”的范围。该处理程序是一个匿名函数，会弹出一个alert()。

但是，如果我将其分配给父节点的innerHTML，则此onclick事件处理程序将被销毁-单击“ foo”将无法弹出警报框。

这个可以解决吗？

<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>

阅读 316

2020-04-25

共1个答案

一尘不染

不幸的是，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);
    }
}

2020-04-25