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

Question

假设我有这样的 HTML：

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

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

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

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

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

我在这里看到类似的问题如果附加了事件，删除 DOM 对象（在 Javascript 中）会导致内存泄漏吗？但我不清楚删除元素是否会清除事件处理程序。

score 6 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

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

2 回答 2