使用 Vanilla JS 监听 jQuery 事件

Question

所以我试图确定是否可以使用 vanilla JS 来监听添加了 jQuery 的事件。我发现了这个问题：

Listen to jQuery event without jQuery

这肯定是 jQuery 版本 1 的答案。但是第 3 版怎么样？

我有一个 fiddle 放在一起进行测试，但我无法让第一个提交与任何版本的 jQuery 一起工作。我是不是遗漏了什么，或者 jQuery 3 中的事件模型仍然没有使用 DOM 事件模型？

这是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!");
});

Answer 1

简短的回答是这是不可能的，因为 jQuery 在 vanilla JS 上提供了一个事件层。这意味着 vanilla JS 无法与添加的层对话。

所以综上所述，jQuery 可以捕获 vanilla JS 事件，但 vanilla JS 无法捕获 jQuery 添加的事件。

Answer 2

这个问题有点老了，但它的排名仍然很高，所以对于任何想用普通 JS 来收听 jQuery 事件的人来说：现在可以使用恰当命名的 jquery-events-to-dom-events图书馆。

使用 Vanilla JS 监听 jQuery 事件

Listen for jQuery Event With Vanilla JS

javascript

jquery

dom-events

jquery-events