命名空间原版 JavaScript 事件，如 jQuery 中的事件

Namespace vanilla JavaScript events like in jQuery

本文关键字：事件 jQuery 原版 JavaScript 命名空间      更新时间：2023-09-26

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

jQuery 命名空间示例：

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

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

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

如果不是匿名函数：

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

使用命名函数：

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

然后，您可以使用：

window.removeEventListener('resize', myScroll);

确保范围内有myScroll。当您在与添加侦听器不同的位置删除侦听器时，也许您应该在某个外部作用域中定义函数，并以与removeEventListener相同的方式在addEventListener中使用它们的名称：

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

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

请参阅EventTarget.removeEventListener()文档。

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

你可以这样做，提高性能，但这可以完成它。

相关文章：