如何操作/扩展DOM Event对象？自定义事件冒泡场景需求

我之前也碰到过类似的困境——原生DOM Event对象的属性大多被锁定，直接修改或克隆都有各种坑。针对你要手动实现事件冒泡、需要修改target属性的需求，这几个经过验证的方案应该能帮到你：

1. 克隆原生Event实例（最稳妥的兼容方案） #

虽然手动复制属性听起来繁琐，但我们可以封装一个工具函数，批量处理常用属性，同时保证新实例是合法的Event类型，所有原生方法都能正常调用：

function cloneEvent(originalEvent, overrides = {}) {
  // 基于原始事件的构造函数创建新实例（比如MouseEvent、KeyboardEvent）
  const EventConstructor = originalEvent.constructor;
  const newEvent = new EventConstructor(originalEvent.type, originalEvent);

  // 覆盖需要修改的属性，用Object.defineProperty确保可配置
  Object.entries(overrides).forEach(([key, value]) => {
    Object.defineProperty(newEvent, key, {
      value,
      writable: true,
      enumerable: true,
      configurable: true
    });
  });

  return newEvent;
}

// 使用示例：修改target属性
const modifiedEvent = cloneEvent(originalDomEvent, { target: myCustomElement });
modifiedEvent.stopPropagation(); // 完全正常工作，无非法调用错误

这个方案的核心优势是：新对象是标准的DOM Event实例，所有原生方法（stopPropagation、preventDefault等）的上下文绑定正确，不会出现Illegal invocation错误，完全兼容原生事件逻辑。

2. 带上下文绑定的Proxy（轻量临时修改方案） #

你之前用Proxy失败的原因是：调用事件方法时，this指向了Proxy对象而非原始Event。只要在Proxy的get陷阱里，把方法绑定回原始Event就能解决这个问题：

function createEventProxy(originalEvent, overrides = {}) {
  return new Proxy(originalEvent, {
    get(target, prop) {
      // 优先返回自定义的覆盖属性
      if (prop in overrides) {
        return overrides[prop];
      }

      const value = target[prop];
      // 如果是方法，绑定this到原始Event对象
      if (typeof value === 'function') {
        return value.bind(target);
      }

      return value;
    }
  });
}

// 使用示例
const proxiedEvent = createEventProxy(originalDomEvent, { target: myCustomElement });
proxiedEvent.stopPropagation(); // 现在能正常执行，不会报错

这个方案不需要创建新实例，代码更简洁，适合临时修改事件属性的场景。唯一需要注意的是：对于一些严格只读的原生属性，Proxy的覆盖可能在特定环境下有兼容性问题，但target属性是完全可以这样处理的。

3. 用CustomEvent封装（自定义事件系统方案） #

如果你的事件冒泡逻辑不需要完全兼容原生Event的所有属性，可以用CustomEvent封装原始事件，同时添加自定义属性：

function createBubbleEvent(originalEvent, overrides = {}) {
  const customEvent = new CustomEvent(originalEvent.type, {
    bubbles: originalEvent.bubbles,
    cancelable: originalEvent.cancelable,
    detail: originalEvent // 把原始事件存到detail里，方便后续访问
  });

  // 合并自定义属性
  Object.assign(customEvent, overrides);

  // 可选：把原始事件的方法绑定到自定义事件上
  ['stopPropagation', 'preventDefault', 'stopImmediatePropagation'].forEach(method => {
    customEvent[method] = originalEvent[method].bind(originalEvent);
  });

  return customEvent;
}

这个方案灵活性很高，适合构建自己的事件系统，但如果需要严格遵循原生事件的行为，前两个方案会更合适。

总结 #

• 追求完全兼容原生Event：优先选克隆实例的方案，无上下文问题，最稳妥。
• 临时修改少量属性：用带上下文绑定的Proxy，轻量高效。
• 自定义事件系统：用CustomEvent封装，灵活可控。

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