Question

如果我已经向窗口对象添加了一个函数，如下所示：

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

并且假设我的代码可能多次运行此代码段是否存在内存泄漏的危险？（因为我永远不会从窗口[SPA]中删除该功能）

为了安全起见，我更喜欢在我的组件死亡时删除该功能（顺便说一下，angularjs2）如何从窗口对象中“取消绑定”一个函数？

我希望我理解正确，每次拨打window.onclick = function(...)我添加一个功能而不是替换一个

Answer 1

使用onEVENT语法时，无法从对象中删除特定的匿名事件处理程序。每当您致电object.onclick =时，都会覆盖当前分配给onclick object属性的所有内容。

您需要将addEventListener()和removeEventListener()与命名函数一起使用：

function windowClicker(event) 
{
    if (event.target == modal) 
    {
        modal.style.display = "none";
    }
}

// Add the listener:
window.addEventListener('click', windowClicker, false);

// Remove it:
window.removeEventListener('click', windowClicker, false);

Answer 2

如果您添加

之类的活动

window.onclick = function() {
    // some stuff..
}

然后只有一个 onclick侦听器，您可以将其删除，就像

一样

window.onclick = undefined;

但是如果你想删除命名函数，那么你可以这样做：

function abc(event) {
    // do something
}

window.addEventListener('click', abc); // add the listener

window.removeEventListener('click', abc); // remove the listener

你可以添加多个＆＃39; onclick＆＃39;像这样的监听器，但你必须保持对它们的引用，所以匿名函数永远保留（直到重新加载页面）。

Answer 3

对于命名函数，请使用addEventListener和removeEventListener ...

window.addEventListener('click', windowClickHandler, false);
window.removeEventListener('click', windowClickhandler, false);

您可以使用上述方法在元素上拥有尽可能多的事件侦听器。

对于未命名的功能，请使用...

window.onclick = function(event) { // do stuff; };
window.onclick = null;

您只能使用上述方法设置 ONE 事件处理程序。使用此方法设置的每个window.onclick都会覆盖前一个。将其设置为null只会删除最后一组。

每台浏览器如何根据这些调用实现垃圾收集。

Answer 4

如果您分配到element.onEVENT，则可以通过将null或undefined分配到同一媒体资源来删除绑定。分配给属性不会添加，它会替换。

如果要添加多个事件处理程序，则需要使用element.addEventListener。然后，您可以使用element.removeEventListener删除处理程序。但是要使用它，你必须使用一个命名函数，因为remove调用需要提供以前添加的相同函数，如果你没有将函数分配给一个名字，你就不能这样做。 / p>

从窗口中删除事件处理函数？

4 个答案: