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

Question

我是 JavaScript 的初学者。一本 JavaScript 书说 element.innerHTML 的缺点之一是:

Event handlers may no longer work as intended.

我不明白这是什么意思。有人可以给我举个例子吗？

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>