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

所以你完全破坏并重新创建所有内容.

@ŠimeVidas:是的,但不仅仅是事件处理程序.它会破坏元素本身,因此也会破坏处理程序以及可能在元素的属性上设置的任何其他数据,这些数据不会显示为属性.[实施例](http://jsfiddle.net/A7aPA/8/) (2认同)

Answer 2

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

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

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