如果我將 JavaScript 事件綁定到一個元素，然后刪除該元素，該事件會發生什么？

Question

假設我有一個元素：

<section id="container">
    <div id="curious">hey, there</div>
</section>

然后，在 DOM 加載后，我將一個事件綁定到元素，如下所示：

$('#curious').click(function (){
  alert('Are you curious?');
});

稍后，該元素被刪除：

$('#container').html('');

綁定事件會發生什么？ 是不是也刪了？ 它會徘徊嗎？ 清理它是一個好習慣嗎？

Answer 1

根據.html()方法的 jQuery 文檔，刪除了事件處理程序。

這樣做是為了防止內存泄漏。

當.html()用於設置元素的內容時，該元素中的任何內容都會被新內容完全替換。 此外，jQuery 在將這些元素替換為新內容之前，會從子元素中刪除其他結構，例如數據和事件處理程序。

同樣，在使用.empty() / .remove()方法時也是如此：

所有與元素關聯的綁定事件和 jQuery 數據都將被刪除。

如果要保留數據和事件偵聽器，請改用.detach()方法。 .detach()方法本質上與.remove()方法相同，只是它保留了與已刪除元素關聯的所有 jQuery 數據（這意味着您可以在分離后附加相同的元素，並且事件會仍然受到約束）。