命名空间 vanilla JavaScript 事件，如 jQuery答案

【问题标题】：Namespace vanilla JavaScript events like in jQuery命名空间 vanilla JavaScript 事件，如 jQuery
【发布时间】：2015-08-28 08:01:46
【问题描述】：

在 jQuery 中，当你设置一个事件时，你可以命名它。这意味着（如果您愿意）您可以拥有多个调整窗口大小事件，例如，并且能够单独取消绑定它们，而无需取消绑定该选择器上的所有事件。

jQuery 命名空间示例：

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

我想知道如何在纯 JavaScript 中创建命名空间。这显然行不通：

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

【问题讨论】：

标签： javascript jquery events javascript-events

【解决方案1】：

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

您可能会做得更好，但这可以完成。

【讨论】：

【解决方案2】：

如果不是匿名函数：

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() 文档。

【讨论】：