修改innerHTML時如何防止事件監聽器遺失？
- Patricia Arquette原創
- 2024-12-15 19:40:19534瀏覽
附加到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