问题描述
往body中使用innnerHTML的形式添加元素之后,事件绑定失效,如下代码点击将不能弹出111,请问原因是?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn');
var str='';
for(var i=0;i<10;i++ ){
str+='<div></div>';
}
document.body.innerHTML+=str;
//此时点击将不能弹出111
oBtn.onclick=function(){
alert(111);
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="点击">
</body>
</html>
这个时候不能用onclick绑定事件,需要做事件监听,用addeventlistener
自解1
修改innerHTML会导致节点重新渲染,那么此刻的btn将不再是页面初始化的btn
var oBtn2=document.getElementById('btn');
console.log(oBtn2===oBtn)//false 得到的结果是false 说明不再是同一个节点
得到的结果是false 说明btn已经发生改变,我们只给重新渲染之前的btn添加了事件,渲染之后的btn木有被添加事件,故无论怎么点击都不会弹出 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中了,就不会被触发,不会被传播到了