名称空间香草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。

请参阅EventTarget.removeEventListener()文档。

Answer 2

由于@rsp应答正确地解决了解除绑定正确处理程序的问题，因此它并不真正回答名称空间问题。要处理这个问题，您需要做更多的如下代码：

function on(elm, evtName, handler) {
  evtName.split('.').reduce(function(evtPart, evt) {
    evt = evt ? evt +'.'+ evtPart : evtPart;
    elm.addEventListener(evt, handler, true);
    return evt;
  }, '');
}

function off(elm, evtName, handler) {
  evtName.split('.').reduce(function(evtPart, evt) {
    evt = evt ? evt +'.'+ evtPart : evtPart;
    elm.removeEventListener(evt, handler, true);
    return evt;
  }, '');
}

// Your handler
function onScroll(e) { ... }

// To bind it
on(window, 'scroll.myScrollNamespace', onScroll);

// To unbind it
off(window, 'scroll.myScrollNamespace', onScroll);

总之:这实际上设置了几个事件侦听器--一个用于名称空间的每个部分。不幸的是，这个功能并不是本机支持的，但正如您所看到的，它可以相对简单地实现。只是要小心，即使这个脚本支持深刻的名称空间(例如。scroll.parent.child)它将绑定许多事件侦听器(在本例中为3)，因此是不可取的。

你可能会做更多的表演，但这样做就可以了。