Window.document.body.innerHTML replacement page html causes event invalidation, how to solve event invalidation?

The

window.document.body.innerHTML = newHtml page has been re-rendered. I know this, but how to solve the problem of event invalidation? Ask the Great God for advice

Apr.05,2021

two ways:

  1. use event agents, all delegate to document, and then determine the event source through targe
document.addEventListener("click",function(e) { 
  // e.targe
  if(e.target && xxxx) { 
    //  
    console.log(""); 
  } 
});  
  1. Unified Management event Monitor Logout

before each re-rendering, log out of the event, after rendering, re-bind, the following is a pseudo code, meaning.

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()
Menu