Question

我是JavaScript的初学者。一本JavaScript书籍说element.innerHTML的一个缺点是：

事件处理程序可能无法按预期工作。

我无法理解这是什么意思。有人可以举个例子吗？

Answer 1

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

element.innerHTML += "inserted HTML";

这将获取当前的HTML，将其与插入的HTML连接，然后解析它。

作为副作用，现有元素的所有内部状态（如事件监听器，检查，......）都将丢失。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

这将保留现有元素。

＆＃13;

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

＆＃13;

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

＆＃13;

另一种选择，如果您不介意将要插入的内容包装在元素中，请使用appendChild：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

Answer 2

innerHTML是元素的html内容的字符串表示。获取这些内容没有副作用，但重置它会强制浏览器生成 new 元素。

文档中的每个HTML标记都被浏览器解析为唯一的DOM HTMLElement对象。事件处理程序绑定到这些元素。通过重置innerHTML属性，浏览器会删除旧元素，并使DOM解析器根据新的html字符串创建其他元素对象。删除元素后，它的事件处理程序也会被删除。

想象一下，你有一个元素通过处理程序响应它的点击事件，当元素被删除时你无法点击它，所以它让你觉得处理程序也被删除了。事件处理程序的垃圾收集方式取决于已编写的代码和JavaScript解释器的工作方式。

Answer 3

因为当您使用带有element.innerHTML函数的Javascript动态创建元素时，新创建的元素可能无法按预期响应Event Listeners方法。

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

3 个答案: