扫码关注官方订阅号
往body中使用innnerHTML的形式添加元素之后,事件绑定失效,如下代码点击将不能弹出111,请问原因是?
走同样的路,发现不同的人生
关于Button对象
document.body.innerHTML+=str;
执行后body的元素内容变了,DOM元素结构已经变了那么之前通过
var oBtn=document.getElementById('btn');
获取的oBtn在当前的DOM树中已经不存在了,这点我们可以通过在
document.body.innerHTML+=str; var _oBtn_=document.getElementById('btn'); console.log(oBtn=== _oBtn_?'此oBtn非彼oBtn':'什么鬼');
虽然在DOM树中不存在了,但是对象还在函数体中,并没有被GC掉,所以oBtn.onclick还能正常运行
关于行为触发
点击行为的触发是基于DOM树结构中的元素的,故浏览器中的事件也称为DOM事件既然元素都不在DOM中了,就不会被触发,不会被传播到了
自解1修改innerHTML会导致节点重新渲染,那么此刻的btn将不再是页面初始化的btn
var oBtn2=document.getElementById('btn'); console.log(oBtn2===oBtn)//false 得到的结果是false 说明不再是同一个节点
得到的结果是false 说明btn已经发生改变,我们只给重新渲染之前的btn添加了事件,渲染之后的btn木有被添加事件,故无论怎么点击都不会弹出 111
这个时候不能用onclick绑定事件,需要做事件监听,用addeventlistener
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
关于Button对象
执行后
body的元素内容变了,DOM元素结构已经变了
那么之前通过
获取的oBtn在当前的DOM树中已经不存在了,这点我们可以通过在
虽然在DOM树中不存在了,但是对象还在函数体中,并没有被GC掉,所以oBtn.onclick还能正常运行
关于行为触发
点击行为的触发是基于DOM树结构中的元素的,故浏览器中的事件也称为DOM事件
既然元素都不在DOM中了,就不会被触发,不会被传播到了
自解1
修改innerHTML会导致节点重新渲染,那么此刻的btn将不再是页面初始化的btn
得到的结果是false 说明btn已经发生改变,我们只给重新渲染之前的btn添加了事件,渲染之后的btn木有被添加事件,故无论怎么点击都不会弹出 111
这个时候不能用onclick绑定事件,需要做事件监听,用addeventlistener