更新 DOM 节点的 innerHTML 时如何保留事件监听器？

修改innerHTML时保留事件监听器

分配给DOM节点的innerHTML时，附加到后代元素的任何事件监听器都将被销毁。如果目的是在不影响现有事件处理的情况下附加附加内容，这可能会出现问题。

解决方案：insertAdjacentHTML

.insertAdjacentHTML() 方法提供了一个保留修改innerHTML 时的事件侦听器。通过使用“afterend”指定插入内容的位置，可以在不影响现有 DOM 结构或其事件处理程序的情况下追加内容。

示例：

考虑以下代码片段：

var mydiv = document.getElementById('mydiv');

// Appending content using .innerHTML (destroys event listeners)
mydiv.innerHTML += '<p>New paragraph</p>';

// Appending content using .insertAdjacentHTML (preserves event listeners)
mydiv.insertAdjacentHTML('beforeend', '<p>New paragraph</p>');

在此示例中，.insertAdjacentHTML()方法成功地将新段落附加到 #mydiv 元素，同时保留现有的事件侦听器。这种方法可以应用于任何需要内容修改的 DOM 元素，而不影响其事件处理。

以上是更新 DOM 节点的 innerHTML 时如何保留事件监听器？的详细内容。更多信息请关注PHP中文网其他相关文章！