命名空间vanilla JavaScript事件,如jQuery

Question

在jQuery中,当您设置事件时,您可以命名它.这意味着(如果您愿意),例如,您可以拥有多个调整大小窗口事件,并且能够单独取消绑定它们,而不必取消绑定该选择器上的所有事件.

jQuery命名空间的示例:

$(window).on('scroll.myScrollNamespace, function() ...

我想知道如何在纯JavaScript中创建命名空间.这显然不起作用:

window.addEventListener('resize.myScrollNamespace', function() ...

Answer 1

如果不是匿名函数:

window.addEventListener('resize', function () {...});

你使用命名函数:

window.addEventListener('resize', function myScroll() {...});

那么你可以使用:

window.removeEventListener('resize', myScroll);

确保你有myScroll范围.当您在不同于添加它们的位置移除侦听器时,可能应该在某个外部作用域中定义函数,并addEventListener以与以下相同的方式使用它们的名称removeEventListener:

function myScroll() {
  // ...
}

window.addEventListener('resize', myScroll);

window.removeEventListener('resize', myScroll);

如果您希望能够一次删除多个侦听器,则必须将它们存储在某个数组中,并为其每个元素调用removeEventListener.