从 jQuery 事件创建 DOM 事件答案

【问题标题】：Create a DOM Event from a jQuery Event从 jQuery 事件创建 DOM 事件
【发布时间】：2018-05-08 23:14:25
【问题描述】：

我正在使用一个触发 jQuery 事件的第 3 方库，并且我正在使用另一个侦听 DOM 事件的第 3 方库。

我需要连接这两个！我正在考虑做这样的事情：

$(el).on('change', function (e) {
    if (e.originalEvent) return; // already a DOM event
    el.dispatchEvent(e.makeDOMEvent());
});

显然 jQuery 没有 makeDOMEvent() 函数……但是有没有等价的东西？

【问题讨论】：

在页面上添加两个脚本否？
为什么除了 jQuery 之外还需要一个单独的 API 来处理 DOM 事件？
我正在使用使用 DOM 事件的第三方库，仅此而已。这不是需要它的问题，而是我必须处理的问题。
不，如果您仔细观察，如果我在 originalEvent 中找到一个 DOM 事件，我会立即返回并跳过尝试分派该事件。我的 jQuery 库正在使用 trigger() 来调度事件。
为什么不到处使用原生 DOM 事件呢？您使用 trigger() 意味着您正在使用 jQuery 创建自定义事件。只需创建自定义 DOM 事件并在任何地方使用 DOM 事件。 jQuery 的on() 方法仍然会捕获它们。

标签： javascript jquery events jquery-events

【解决方案1】：

我在这里回答我自己的问题，因为我还没有看到任何官方方法。

基本上我只是使用普通的旧 Javascript 来创建一个新事件：

$(el).on('change', function (e) {
    if (e.originalEvent) return; // already a DOM event
    el.dispatchEvent(new Event('change', {
        bubbles: true,
        cancelable: true,
    }));
});

这会丢失来自 jQuery 事件的所有数据。

【讨论】：

你可能想停止这个触发的事件：如果你有其他 jQuery 监听它，它会触发两次。如果你绝对需要你的 jQuery 事件，那么你可以将它附加到 DOM 事件：var evt = new Event([...]); evt.jQueryEvent = e; el.dipatchEvent(evt); 然后在e.originalEvent.jQueryEvent 中检索它。