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

gaochenyang
  • 68

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

回复
阅读 6.5k
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()
宣传栏