操作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>')