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

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

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

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

使用上述方法，您可以在一个元素上拥有任意多个事件侦听器。

对于未命名的函数，使用...

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

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

每个浏览器如何实现与这些调用有关的垃圾收集取决于每个浏览器。