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

Patricia Arquette

发布： 2024-12-15 19:40:19

原创

533 人浏览过

How Can I Prevent Event Listener Loss When Modifying innerHTML?

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

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

<div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>

登录后复制

< script>

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

登录后复制

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

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

<script></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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中文网其他相关文章！

来源：php.cn

上一篇：为什么 `setState` 不立即更新 React 组件状态？下一篇：为什么使用 ES6 箭头函数的 jQuery 单击处理程序中的 `$(this)` 会失败？

本站声明

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

作者最新文章