document.body.removeEventListener刪除所有單擊事件偵聽器（不是指定的函數），為什么？

Question

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

刪除整個頁面的所有“ onclick”事件。 為什么？ 我是否沒有明確指定要從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); 

刪除整個頁面的所有“ onclick”事件

不，不是。 但這確實是：

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

在innerHTML上使用+=強制瀏覽器執行以下操作：

• 遍歷body所有元素，為它們構建HTML字符串。
• 將該字符串返回到JavaScript層，然后在右側添加該字符串。
• 解析由JavaScript層分配回innerHTML的字符串，擦除body所有元素（從而失去其事件處理程序和大多數其他狀態），並從解析的HTML中為其創建新的替換元素。

如果要附加到body （或任何其他元素），請不要使用innerHTML += x ，請使用：

• insertAdjacentHTML ：

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

  要么

• createElement和appendChild ：

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

  要么

• 其他各種DOM方法。 更多探索： MDN上的DOM 。