原生JS与jQuery自定义事件交互及数据传递兼容方案

问题根因 #

这类兼容断层本质是jQuery没有复用浏览器原生的事件系统：

• jQuery独立在DOM元素上维护了一套事件缓存队列（存放在jQuery._data(element, 'events')），事件监听、派发逻辑全部走内部队列，和原生addEventListener/dispatchEvent的队列完全隔离
• 两者自定义数据的传递规则不统一：原生自定义事件将附加数据存在event.detail，jQuery触发事件时将数据作为回调的额外参数传入，不会自动写入detail字段
  这就直接导致了跨机制通信时的两类问题：要么事件能触发但自定义数据丢失，要么跨派发方式完全收不到事件。

具体实现 #

整个实现不需要引入jQuery，所有兼容逻辑只在检测到页面全局存在jQuery时才生效，纯原生站点会自动跳过兼容代码，无额外开销。

1. 封装原生事件派发方法，兼容jQuery监听 #

替换插件中原生的dispatchEvent逻辑，派发原生事件后自动检测当前元素是否绑定了jQuery对应事件，如果有就调用jQuery的事件触发接口传数据，用triggerHandler避免重复触发原生事件导致冒泡混乱：

/**
 * 原生派发事件，兼容jQuery监听
 * @param {HTMLElement} element 事件目标元素
 * @param {string} eventName 事件名
 * @param {*} data 自定义附加数据
 */
function dispatchNativeEvent(element, eventName, data) {
  // 先派发标准原生事件，供原生监听器消费
  const nativeEvent = new CustomEvent(eventName, {
    bubbles: true,
    cancelable: true,
    detail: data
  });
  // 打标记防止桥接逻辑循环触发
  nativeEvent._fromNative = true;
  element.dispatchEvent(nativeEvent);

  // 检测到jQuery存在时，同步触发jQuery内部事件队列
  if (window.jQuery) {
    const $ = window.jQuery;
    const eventCache = $._data(element, 'events');
    // 只有元素确实绑定了对应类型的jQuery事件时才触发，减少不必要调用
    if (eventCache?.[eventName]) {
      $(element).triggerHandler(eventName, data);
    }
  }
}

2. 初始化jQuery桥接，让jQuery派发的事件能被原生监听 #

插件初始化时调用一次下面的方法，会在jQuery存在时给它的事件触发逻辑加一层代理，每次jQuery触发事件时同步派发对应的原生自定义事件，把jQuery传递的参数写入event.detail供原生监听器消费：

function initJQueryEventBridge() {
  if (!window.jQuery) return;
  const $ = window.jQuery;
  // 缓存jQuery原始事件触发方法
  const originalTrigger = $.event.trigger;

  // 代理jQuery事件触发逻辑
  $.event.trigger = function(event, data, elem, onlyHandlers) {
    // 先执行原有jQuery事件逻辑
    const result = originalTrigger.apply(this, arguments);

    // 跳过来自原生桥接的触发，避免死循环
    if (event?._fromNative) return result;

    // 解析事件名和目标元素
    const eventType = typeof event === 'string' ? event : event.type;
    const target = elem || document;

    // 派发对应的原生事件
    const nativeEvent = new CustomEvent(eventType, {
      bubbles: !onlyHandlers, // triggerHandler不冒泡
      cancelable: true,
      detail: data
    });
    nativeEvent._fromJQuery = true;
    target.dispatchEvent(nativeEvent);

    return result;
  };
}

// 插件初始化阶段直接调用即可
initJQueryEventBridge();

兼容效果 #

封装完成后四种事件通信场景全部可以正常工作：

• 原生派发、原生监听：事件正常触发，自定义数据从event.detail读取
• 原生派发、jQuery监听：事件正常触发，自定义数据既可以在jQuery包装的事件对象上读取，也会作为回调的第二个参数传入
• jQuery派发、原生监听：事件正常触发，自定义数据从event.detail读取
• jQuery派发、jQuery监听：完全走原有逻辑，无侵入不影响站点已有代码

补充说明：桥接逻辑保留了完整的事件冒泡、默认行为控制能力，preventDefault()、stopPropagation()等事件方法跨机制生效，不需要额外做兼容处理。

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