使用纯JS监听jQuery事件

Question

我正在尝试确定是否可以使用纯JS监听使用jQuery添加的事件。我找到了这个问题：

在没有jQuery的情况下监听jQuery事件

它确实回答了关于jQuery版本1的问题。但是，对于版本3呢？

我有一个fiddle来测试，但我无法让第一个提交按钮在任何版本的jQuery中工作。我错过了什么，还是jQuery 3中的事件模型仍然没有使用DOM事件模型？

https://jsfiddle.net/ydej5qer/1/

这是fiddle中的代码：

HTML：

<div id="div1">
<p>
This is div1. My event was added via jQuery and is listened for by vanilla JS.
</p>
<p>
  Enter the number 2 to have the event fired.
</p>
<input type="text" id="input1" />
<button id="button1">
Submit
</button>
</div>
<div id="div2">
  <p>
    This is div2. My event was added via vanilla JS and is listened for by jQuery.
  </p>
  <p>
    Enter the number 2 to have the event fired.
  </p>
  <input type="text" id="input2" />
  <button id="button2">
  Submit
  </button>
</div>

JavaScript:

var $input1 = $("#input1");
var $input2 = $("#input2");
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");

var event1 = "event1";
var event2 = "event2";

$("#button1").click(function() {
    if (+$input1.val() == 2) {
    $input1.trigger(event1, {message: "Event 1 triggered!"});
  }
});

input1.addEventListener(event1, function(e) {
    console.log("Event 1 triggered! message=" + e.detail.message);
});

$("#button2").click(function() {
    if (+$input2.val() == 2) {
    var event = new CustomEvent(event2, {detail: {message: "Event 2 triggered!"}});
    input2.dispatchEvent(event);
  }
});

$input2.on(event2, function(e) {
    console.log("Event 2 fired, but I don't know how to get the message!");
});

- thatidiotguy

---

对于“是否可能”的部分，我敢说是可以的。jQuery不是二进制组件或任何神秘的东西，它只是一堆Vanilla JavaScript代码。;-) - Álvaro González

我没有提出任何建议（请注意这是一条评论，后面跟着一个笑脸，而不是答案）。如果我有所暗示，对此感到抱歉。 - Álvaro González

请查看https://dev59.com/4HbZa4cB1Zd3GeqPK-Gg#18901932。 - Ted Whitehead

@TedWhitehead 那个案例引用了我在问题中链接的相同错误报告。那个问题没有提供有关jQuery 3的新信息。 - thatidiotguy

@TedWhitehead 虽然我很感激您的评论，但这并没有真正帮助到我。我已经知道可以在本机JS中触发事件。我的问题是，jQuery 3是否本地提供一种机制，允许其事件由vanilla JS处理，而无需实际分派本机事件。从我的fiddle中可以看出，我知道这是可能的 :) - thatidiotguy

Answer 1

简而言之，这是不可能的，因为jQuery提供了一个覆盖原生JS的事件层。这意味着原生JS无法与该添加的层进行通信。

因此，总结一下，jQuery可以捕获原生JS事件，但原生JS无法捕获jQuery添加的事件。

- thatidiotguy

Answer 2

这个问题有点老了，但是它仍然排名很高，所以对于任何想要用vanilla JS监听jQuery事件的人来说：现在可以使用名为jquery-events-to-dom-events的库实现。

- janh