首页 >web前端 >js教程 >修改innerHTML时如何防止事件监听器丢失？

修改innerHTML时如何防止事件监听器丢失？

Patricia Arquette原创: 2024-12-15 19:40:19534浏览

How Can I Prevent Event Listener Loss When Modifying innerHTML?

附加到innerHTML 时保留事件侦听器

分配给父节点的innerHTML 时，附加到后代的事件处理程序可能会被销毁。例如，考虑代码下面：

<div><pre class="brush:php;toolbar:false"><span>

< script>

mydiv = document.getElementById("mydiv");
mydiv.innerHTML += "bar";

这里，在分配给 mydiv.innerHTML 后，附加到包含“foo”的 span 的 onclick 事件处理程序将被销毁。

要避免此问题，请使用 .insertAdjacentHTML() 方法而不是 .innerHTML。此方法保留事件侦听器，并受到所有主流浏览器的支持。

<script></p>
<pre class="brush:php;toolbar:false">var html_to_insert = "<p>New paragraph</p>";
document.getElementById('mydiv').insertAdjacentHTML('beforeend', html_to_insert);

'beforeend' 参数指定元素中插入 HTML 内容的位置。其他选项包括“beforebegin”、“afterbegin”和“afterend”。

以上是修改innerHTML时如何防止事件监听器丢失？的详细内容。更多信息请关注PHP中文网其他相关文章！

html for include Event this innerHTML issue Other

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Why Doesn't `setState` Update the React Component State Immediately?下一篇：Why Does `$(this)` Fail in jQuery Click Handlers with ES6 Arrow Functions?

查看更多