JQuery +纯JS之间的事件交互

Question

我正在编写一个插件，最终将在不同的网站上使用。插件根据事件与页面的其余部分进行通信。到目前一切尚好。

下面是问题所在:一些现有站点使用纯JS来侦听和分派事件，有些使用JQuery。插件本身不应该使用jQuery (出于不同的原因)，而只使用纯JS。因此，目标基本上是在没有jQuery的情况下侦听和分派类似jQuery的事件。

纯JS事件和jQuery事件如何协同工作，特别是与事件关联的自定义数据？

Dispatcher      Listener        Event Triggered     Event Data Transmitted

JS              JS              yes                 yes (event.detail)
JS              jQuery          yes                 no
jQuery          JS              no                  no
jQuery          jQuery          yes                 yes (payload)

以下是代码：/pen/WNMYPBQ

Answer 1

JQuery在Vanilla上有自己的事件层，所以在Vanilla JavaScript中捕捉JQuery事件是不可能的。

一种选择是使用JQuery作为普通DOM事件侦听并重复它们，这正是jquery-events-to events所做的。

但你还在用JQuery，有点.

Answer 2

感谢您将代码页链接到代码:D

您需要做的第一件事是将jQuery元素“转换”为“纯JS”元素。通过执行.get(0)，您现在可以将dispatchEvent函数与我们将使用的输入值作为detail选项的CustomEvent一起使用，它实际上需要的是detail，而不是值。

$button.bind("click", () => {
  const event = new CustomEvent('update', { detail: $input.val() });
  $h1.get(0).dispatchEvent(event);
});

然后，您需要对均匀侦听器所做的唯一更改是使用detail属性而不是value。

_h1.addEventListener("update", function(e){
  this.innerText = e.detail || "no event.detail"
});