为什么事件监听器在使用element.innerHTML后会停止工作？

Question

我是JavaScript的初学者.一本JavaScript书说,其中一个缺点element.innerHTML是:

事件处理程序可能不再按预期工作.

我无法理解这是什么意思.有人能举个例子吗？

Answer 1

最有可能的是,它指的是一些人在最后插入HTML时使用的技术:

element.innerHTML += "inserted HTML";

这将获取当前HTML,将其与插入的HTML连接,并解析所有.

作为副作用,现有元素的所有内部状态(如事件侦听器,检查,......)将丢失.

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
  btn.textContent = "I won't work anymore";
  document.body.innerHTML += "<p>Inserted text</p>";
});

<button>Click me to insert HTML</button>

相反,如果要在元素的末尾插入一些HTML,则可以使用

element.insertAdjacentHTML('beforeend', "inserted HTML");

这将保留现有元素.

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
  btn.textContent = "I still work";
  document.body.insertAdjacentHTML("beforeend", "<p>Inserted text</p>");
});

<button>Click me to insert HTML</button>

另一种选择,如果你不介意插入元素内的插入内容,则使用appendChild:

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
  btn.textContent = "I still work";
  var wrapper = document.createElement('div');
  wrapper.innerHTML = "<p>Inserted text</p>";
  document.body.appendChild(wrapper);
});

<button>Click me to insert HTML</button>