Вопрос по javascript, jquery, dom-events, jquery-events – Слушайте событие jQuery с Vanilla JS

7

Поэтому я пытаюсь определить, можно ли прослушивать события, добавленные с помощью jQuery, с помощью vanilla JS. Я нашел этот вопрос:

Прослушивание события jQuery без jQuery

который определенно отвечает на это для версии 1 jQuery. Как насчет версии 3, однако?

У меня есть скрипка, которую я собрал для тестирования, но я не могу заставить 1-ю отправку работать с любой версией jQuery. Я что-то упустил или модель событий в jQuery 3 все еще не использует модель событий DOM?

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

Вот код в скрипке:

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 = "civicscienceEvent1";
var event2 = "civicscienceEvent2";

$("#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!");
});
Я ничего не предлагаю (обратите внимание, что за комментарием следует смайлик, а не ответ). Извините, если я предложил иначе. Álvaro González
Для части "это возможно", я бы осмелился сказать, что это так. JQuery не является бинарным компонентом или чем-то эзотерическим, это просто набор кода Vanilla JavaScript. ;-) Álvaro González
@TedWhitehead Этот случай ссылается на тот же отчет об ошибке, который включен в случай, на который я ссылался в своем вопросе. Этот вопрос не предлагает никакой новой информации о jQuery 3. thatidiotguy

Ваш Ответ

1   ответ
13

это невозможно, поскольку jQuery предоставляет слой событий поверх ванильного JS. Это означает, что vanilla JS не может общаться с этим добавленным слоем.

Итак, в заключение, jQuery может перехватывать события vanilla JS, но vanilla JS не может перехватывать события, добавленные jQuery.

Похожие вопросы