如何用原生JavaScript实现jQuery事件命名空间功能？

需求背景 #

需要实现类似jQuery事件命名空间的功能，能精准移除特定命名空间的事件监听器：比如给document绑定三个带不同命名空间的click事件（click.docClick1、click.docClick2、click.docClick3），执行移除.docClick2命名空间的操作后，仅移除第二个事件，其余两个保留。同时支持先移除指定命名空间事件再重新绑定，避免事件泄漏。

实现方案 #

原生JS本身没有事件命名空间的内置支持，我们可以封装一个轻量的事件管理工具，手动记录每个监听器的命名空间信息，以此实现精准的事件管理。

封装事件管理工具 #

class EventNamespaceManager {
  constructor() {
    // 用WeakMap存储元素事件映射，避免内存泄漏
    this.eventMap = new WeakMap();
  }

  // 绑定事件：支持格式如 'click.namespace'
  on(element, eventWithNamespace, handler) {
    // 拆分事件类型与命名空间
    const [eventType, namespace = ''] = eventWithNamespace.split('.');
    // 获取当前元素的事件存储容器
    let elementEvents = this.eventMap.get(element);
    if (!elementEvents) {
      elementEvents = new Map();
      this.eventMap.set(element, elementEvents);
    }
    // 获取当前事件类型对应的监听器列表
    let eventHandlers = elementEvents.get(eventType);
    if (!eventHandlers) {
      eventHandlers = [];
      elementEvents.set(eventType, eventHandlers);
    }

    // 包装原回调，记录命名空间和原函数
    const wrappedHandler = function(...args) {
      handler.apply(this, args);
    };
    wrappedHandler._namespace = namespace;
    wrappedHandler._original = handler;

    // 存入列表并绑定原生事件
    eventHandlers.push(wrappedHandler);
    element.addEventListener(eventType, wrappedHandler);
  }

  // 移除事件：支持仅传命名空间（如 '.namespace'）或事件+命名空间（如 'click.namespace'）
  off(element, eventWithNamespace) {
    let eventType = '';
    let namespace = '';

    // 解析传入的参数格式
    if (eventWithNamespace.startsWith('.')) {
      namespace = eventWithNamespace.slice(1);
    } else {
      [eventType, namespace = ''] = eventWithNamespace.split('.');
    }

    const elementEvents = this.eventMap.get(element);
    if (!elementEvents) return;

    // 确定要处理的事件类型范围
    const targetEventTypes = eventType ? [eventType] : Array.from(elementEvents.keys());

    targetEventTypes.forEach(type => {
      const eventHandlers = elementEvents.get(type);
      if (!eventHandlers) return;

      // 筛选需要移除的监听器
      const handlersToRemove = namespace
        ? eventHandlers.filter(handler => handler._namespace === namespace)
        : eventHandlers;

      // 执行原生事件移除
      handlersToRemove.forEach(handler => {
        element.removeEventListener(type, handler);
      });

      // 更新剩余监听器列表
      const remainingHandlers = eventHandlers.filter(handler => !handlersToRemove.includes(handler));
      if (remainingHandlers.length) {
        elementEvents.set(type, remainingHandlers);
      } else {
        elementEvents.delete(type);
      }
    });

    // 元素无剩余事件时，清理映射记录
    if (elementEvents.size === 0) {
      this.eventMap.delete(element);
    }
  }
}

// 创建全局实例供使用
const eventManager = new EventNamespaceManager();

使用示例 #

// 绑定三个带不同命名空间的click事件
eventManager.on(document, 'click.docClick1', () => console.log('触发docClick1'));
eventManager.on(document, 'click.docClick2', () => console.log('触发docClick2'));
eventManager.on(document, 'click.docClick3', () => console.log('触发docClick3'));

// 仅移除docClick2命名空间的事件
eventManager.off(document, '.docClick2');

// 此时点击document，只会打印docClick1和docClick3

// 先移除再绑定指定命名空间事件，避免重复绑定导致的泄漏
eventManager.off(document, '.buttonClick');
eventManager.on(document, 'click.buttonClick', () => console.log('buttonClick触发'));

核心特性 #

• 用WeakMap存储元素事件，元素被销毁时自动清理对应记录，避免内存泄漏
• 每个回调都会被包装，记录对应的命名空间和原函数，确保移除时精准匹配
• 支持多种移除场景：移除指定命名空间的所有事件、移除指定事件类型下的指定命名空间事件

内容的提问来源于stack exchange，提问作者Nodge