操纵innerHTML会删除子元素的事件处理程序吗？

Question

我有一个非常简单的演示：

function foo() {
    alert('Works!');}var inp = document.createElement('input');inp.onblur = foo;document.body.appendChild(inp);

看到这里： http : //jsfiddle.net/A7aPA/

如您所见，这可行。（单击输入，然后单击其他位置，然后会弹出警报。）

但是，如果我将此行添加到JavaScript代码中：

document.body.innerHTML += '<br>';

然后模糊处理程序停止工作（顺便说一句，不会引发任何错误）。

看到这里： http : //jsfiddle.net/A7aPA/1/

这是为什么？

Answer 1

是的，当您这样做时：document.body.innerHTML&nbsp;+=&nbsp;'<br>';您确实在做：document.body.innerHTML&nbsp;=&nbsp;(document.body.innerHTML&nbsp;+&nbsp;'<br>');因此，您将完全销毁并重新创建所有内容。

Answer 2

修改将innerHTML导致重新解析内容并重新创建DOM节点，从而丢失您已附加的处理程序。如第一个示例中的追加元素不会导致该行为，因此不必进行重新解析，因为您要显式修改DOM树。处理此问题的另一种好方法是使用insertAdjacentHTML（）。例如：document.body.insertAdjacentHTML('beforeend',&nbsp;'<br>')