document.body.removeEventListener删除所有单击事件侦听器（不是指定的函数），为什么？

Question

document.body.removeEventListener("click", delElm);

removes all "onclick" events for the entire page. why? Am I not clearly specifying what function I want removed from the document.body?

document.body.innerHTML += "<div id='dynamicLinkCheckOutput'></div>";
var dynamicLinkCheckOutput = document.getElementById('dynamicLinkCheckOutput');

function delElm(e){
    var dynamicLinkCheckOutput = document.getElementById('dynamicLinkCheckOutput');        
       dynamicLinkCheckOutput.parentNode.removeChild(dynamicLinkCheckOutput);
    //document.body.removeEventListener("click", delElm); //moved for clairity
}
setTimeout(function(){
    dynamicLinkCheckOutput.onclick = function(e){
        e.stopPropagation();
    };
    document.body.addEventListener("click", delElm);
    document.body.removeEventListener("click", delElm); //ALL click events from ALL elements have been removed the moment this line executes. 
}, 0);

Answer 1

 document.body.removeEventListener("click", delElm); 

removes all "onclick" events for the entire page

No, it doesn't. But this does:

document.body.innerHTML += "<div id='dynamicLinkCheckOutput'></div>";

Using += on innerHTML forces the browser to:

• Spin through all of the elements inside body building an HTML string for them.
• Return that string to the JavaScript layer, which then adds on the string on the right-hand side.
• Parse the string assigned back to innerHTML by the JavaScript layer, wipe out all elements within body (thus losing their event handlers and most other state), and create new , replacement elements for them from the parsed HTML.

If you want to append to body (or any other element), don't use innerHTML += x , use:

• insertAdjacentHTML :

   document.body.insertAdjacentHTML("beforeend", "<div id='dynamicLinkCheckOutput'></div>"); 

  or

• createElement and appendChild :

   var div = document.createElement("div"); div.id = "dynamicLinkCheckOutput"; document.body.appendChild(div); 

  or

• Various other DOM methods. More to explore: DOM on MDN .