window.document.body.innerHTML替换页面html导致事件失效，怎么解决事件失效？

Question

window.document.body.innerHTML = newHtml 页面重新渲染了，这个我知道，那怎么解决事件失效问题呢？求大神指教

Answer 1

两种方式：

1. 利用事件代理,全部委托给document，然后通过targe确定事件源

document.addEventListener("click",function(e) { 
  // 检查事件源e.targe
  if(e.target && xxxx) { 
    // 真正的处理过程在这里 
    console.log("你的处理事件函数"); 
  } 
});  

1. 统一管理事件监听注销

每次重新渲染前，注销事件，渲染后，重新绑定,下面就是一个伪代码，意会。

var Event = {
    init(){
        // 绑定你的各种dom元素事件
        dom1.addEventListener('click', () => {});
        dom2.addEventListener('click', () => {});
        ...
    },
    destroy(){
        // 销毁你的各种事件
        dom1.removeEventListener('click', () => {});
        dom2.removeEventListener('click', () => {});
        ...
    }  
}

Event.destroy()
window.document.body.innerHTML = newHtml
Event.init()