javascript - Vanilla JavaScript 中的事件处理程序命名空间

Question

我熟悉 jQuery 事件处理程序中的命名空间。我可以在特定命名空间中添加事件处理程序:

$('#id').on('click.namespace', _handlerFunction);

然后我可以删除该命名空间中的所有事件处理程序:

$('#id').off('.namespace');

这里的优点是我只能删除此命名空间中的事件，而不能删除任何应维护的用户添加/附加事件。

有没有人能告诉我如何在不使用 jQuery 的情况下获得类似的结果？

Answer 1

对于仍在寻找这个的任何人，我最终制作了一个辅助单例，它为我跟踪函数引用。

class EventHandlerClass {
  constructor() {
    this.functionMap = {};
  }

  addEventListener(event, func) {
    this.functionMap[event] = func;
    document.addEventListener(event.split('.')[0], this.functionMap[event]);
  }

  removeEventListener(event) {
    document.removeEventListener(event.split('.')[0], this.functionMap[event]);
    delete this.functionMap[event];
  }
}

export const EventHandler = new EventHandlerClass();

然后只需导入 EventHandler 并像这样使用:

EventHandler.addEventListener('keydown.doop', () => console.log("Doop"));
EventHandler.addEventListener('keydown.wap', () => console.log("Wap"));
EventHandler.removeEventListener('keydown.doop');
// keydown.wap is still bound