为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

FFIVE 2019-09-26 10:41:04
我有一个非常简单的演示: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/这是为什么?
查看完整描述

3 回答

?
紫衣仙女

TA贡献1839条经验 获得超15个赞

是的,当您这样做时:

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

您确实在做:

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

因此,您将完全销毁并重新创建所有内容。


查看完整回答
反对 回复 2019-09-26
?
郎朗坤

TA贡献1921条经验 获得超9个赞

修改将innerHTML导致重新解析内容并重新创建DOM节点,从而丢失您已附加的处理程序。如第一个示例中的追加元素不会导致该行为,因此不必进行重新解析,因为您要显式修改DOM树。

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

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


查看完整回答
反对 回复 2019-09-26
  • 3 回答
  • 0 关注
  • 309 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信