操作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 += '<br>'; 

你真的在做：

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

所以你完全摧毁并重新创造了所有的内容。

Answer 2

修改innerHTML会导致重新解析内容并重新创建DOM节点，从而丢失您附加的处理程序。像第一个示例中那样添加元素不会导致该行为，因此不必重新解析，因为您明确地修改了DOM树。

处理此问题的另一个好方法是使用insertAdjacentHTML()。例如：

document.body.insertAdjacentHTML('beforeend', '<br>')