删除带有附加事件处理程序的 DOM 元素的正确方法是什么？答案

【问题标题】：What's the proper way of removing DOM element with attached event handlers?删除带有附加事件处理程序的 DOM 元素的正确方法是什么？
【发布时间】：2013-08-27 11:11:45
【问题描述】：

假设我有这样的 HTML：

<tr id="myRow">
 <td > some text</td>
 <td > some text</td>
...
</tr>

并且每个 TD 都已将处理程序附加到 onClick 事件。

我想以正确的方式删除#myRow childrens。下面的代码会导致内存泄漏吗？

query('#myRow').innerHtml = '';

删除所有子 TD 元素的正确方法是什么 - 不会导致内存泄漏？

我在这里看到了类似的问题Does remove a DOM object (in Javascript) will cause Memory leak if it has event attached?，但我不清楚删除元素是否会清除事件处理程序。

【问题讨论】：

标签： html dom dart

【解决方案1】：

一般来说，现代浏览器会尝试确保在您删除或替换 DOM 元素时不会发生内存泄漏。因此，您应该可以设置innerHtml 或调用element.children.clear()，而不必担心事件处理程序会导致内存泄漏。

但有一件事：您通常希望避免向多个子元素添加执行相同操作的事件处理程序的情况。将事件处理程序附加到父级然后使用target 和currentTarget 属性来区分附加处理程序的元素和触发事件处理程序的元素通常更有效。

【讨论】：

【解决方案2】：

您可以像这样删除所有元素：

query("#myRow").children.clear();

我认为这也将负责删除处理程序等。文档中没有专门关于内存问题的内容：https://www.dartlang.org/docs/tutorials/remove-elements/

【讨论】：