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 (таким образом, потеряв их обработчики событий и большинство других состояний), и создайте new , заменяя элементы для них из проанализированного 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.Больше для изучения: DOM на MDN .