修改innerHTML时如何防止事件监听器丢失？
- Patricia Arquette原创
- 2024-12-15 19:40:19603浏览
附加到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中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn