在用innnerHTML的形式添加元素之后，事件绑定失效，如下
document.body.innerHTML += 'xxx';
其实就是：
document.body.innerHTML = (document.body.innerHTML + 'xxx');
把原本的元素摧毁之后重建一个加上'xxx'的新元素，所以旧元素的handler也被重置（又或着是说丢失）了！
01
示例详解
如下代码：
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.onclick); //之前绑定的事件还存在
虽然在DOM树中不存在了，但是对象还在函数体中，并没有被GC掉，所以oBtn.onclick还能正常运行
但
点击行为的
触发是基于DOM树结构中的元素的
，故浏览器中的事件也称为DOM事件
既然元素都不在DOM中了，就不会被触发，不会被传播到了
02
那么用什么替代比较好呢？
推荐 insertAdjacentHTML 方法：
语法：
element. insertAdjacentHTML(position, text);
然后position有这四种位置可以选：
<!-- beforebegin -->
<!-- afterbegin -->
<!-- beforeend -->
<!-- afterend -->
据说它比innerHTML效能更高也更安全，重点是它竟然还可以选位置
