类似jQuery中的JavaScript事件

在jQuery中，设置事件时，可以为其命名名称空间。例如，这意味着（如果需要）可以有多个调整大小窗口事件，并且可以单独解除绑定，而无需解除该选择器上所有事件的绑定

jQuery名称空间示例：

$（窗口）.on（'scroll.myScrollNamespace，function（）…

我想知道如何在纯JavaScript中创建名称空间。这显然不起作用：

---

window.addEventListener（'resize.myScrollNamespace'，function（）…

如果不是匿名函数：

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

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

使用命名函数：

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

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

然后您可以使用：

window.removeEventListener('resize', myScroll);

确保您的作用域中有

myScroll

。当您在不同的位置删除侦听器而不是添加它们时，也许您应该在一些外部作用域中定义函数，并在

addEventListener

中使用它们的名称，方法与在

removeventlistener

中相同：

function myScroll() {
  // ...
}

window.addEventListener('resize', myScroll);

window.removeEventListener('resize', myScroll);

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

---

请参阅文档。

由于@rsp answer正确地解决了解除绑定正确处理程序的问题，因此它实际上没有解决名称空间的问题。 要处理此问题，您需要执行更多的编码，如下所示：

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个），因此是不可取的

你可能会做得更好，但这就完成了