如何将jQuery事件转换为DOM事件以对接第三方库？

刚好之前处理过类似的场景，jQuery确实没有提供makeDOMEvent()这个方法，但我们可以手动构建原生DOM事件来完成两个第三方库的对接，给你几个实用的方案：

方案1：基础版 - 触发原生Change事件 #

如果不需要传递额外数据，只需要让监听原生DOM事件的库感知到change事件，直接手动创建并触发原生Event对象即可：

$(el).on('change', function (e) { 
    // 跳过原生DOM触发的事件，避免循环触发
    if (e.originalEvent) return; 

    // 创建符合标准的原生change事件
    const nativeChangeEvent = new Event('change', {
        bubbles: true,    // 保持和jQuery事件一致的冒泡特性
        cancelable: true  // 允许事件被取消，和jQuery事件行为对齐
    });

    // 在目标元素上触发原生事件
    el.dispatchEvent(nativeChangeEvent); 
});

这个方案的核心是模拟jQuery触发的事件，生成一个原生DOM事件并派发，这样监听原生change事件的库就能正常捕获到。

方案2：进阶版 - 传递自定义数据 #

如果你的jQuery事件携带了额外的自定义数据，需要同步给原生事件监听者，可以使用CustomEvent来传递数据：

$(el).on('change', function (e) { 
    if (e.originalEvent) return; 

    // 创建带自定义数据的原生事件
    const nativeChangeEvent = new CustomEvent('change', {
        bubbles: true,
        cancelable: true,
        detail: {
            // 把jQuery事件中的自定义数据映射到detail字段
            targetValue: e.target.value,
            customData: e.myCustomData // 假设jQuery事件中携带了这个自定义属性
        }
    });

    el.dispatchEvent(nativeChangeEvent); 
});

之后，监听原生事件的代码可以通过event.detail获取你传递的自定义数据，比如：

el.addEventListener('change', function(nativeEvent) {
    console.log(nativeEvent.detail.targetValue);
    console.log(nativeEvent.detail.customData);
});

注意事项 #

• 一定要保留if (e.originalEvent) return;这个判断，否则当原生事件触发时，会再次进入jQuery的事件处理函数，导致循环触发的问题。
• 如果你的目标元素是表单控件（比如input、select），确保在触发事件前，元素的状态（比如value值）已经和jQuery事件触发时的状态一致，这样原生事件监听者拿到的状态才是正确的。

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