Escuche el evento jQuery con Vanilla JS

3 minutos de lectura

avatar de usuario de thatidiotguy
eseidiota

Entonces, estoy tratando de determinar si es posible escuchar eventos agregados con jQuery usando Vanilla JS. Encontré esta pregunta:

Escuche el evento jQuery sin jQuery

lo que definitivamente lo responde para la versión 1 de jQuery. ¿Qué hay de la versión 3 sin embargo?

Tengo un violín que armé para probar, pero no puedo hacer que el primer envío funcione con ninguna versión de jQuery. ¿Me estoy perdiendo algo o el modelo de eventos en jQuery 3 todavía no usa el modelo de eventos DOM?

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

Aquí está el código en el violín:

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

  • Para la parte de “es posible”, me atrevería a decir que lo es. jQuery no es un componente binario ni nada esotérico, es solo un montón de código Vanilla JavaScript. 😉

    –Álvaro González

    1 de diciembre de 2016 a las 16:05

  • @ÁlvaroGonzález ¿Qué es exactamente lo que propones? ¿Cómo accedería Vanilla JS a las estructuras de eventos privados de jQuery? ¿Está proponiendo que modifique la biblioteca central?

    – ese idiota

    1 de diciembre de 2016 a las 16:52

  • No estoy proponiendo nada (tenga en cuenta que es un comentario seguido de una carita sonriente, no una respuesta). Lo siento si sugerí lo contrario.

    –Álvaro González

    1 de diciembre de 2016 a las 16:55

  • Consulte stackoverflow.com/a/18901932/673457

    –Ted Whitehead

    1 de diciembre de 2016 a las 17:15

  • @TedWhitehead Ese caso hace referencia exactamente al mismo informe de error que se incluye en el caso que vinculé en mi pregunta. Esa pregunta no ofrece nueva información sobre jQuery 3.

    – ese idiota

    1 de diciembre de 2016 a las 17:52

La respuesta corta es que esto es imposible ya que jQuery proporciona una capa de eventos sobre JS estándar. Eso significa que Vanilla JS no puede hablar con esa capa adicional.

Entonces, en resumen, jQuery puede capturar eventos de Vanilla JS, pero Vanilla JS no puede capturar eventos agregados de jQuery.

Esta pregunta es algo antigua, pero aún ocupa un lugar destacado, por lo que para cualquiera que busque una manera de escuchar eventos de jQuery con JS estándar: ahora es posible con el acertadamente llamado jquery-eventos-a-dom-eventos biblioteca.

¿Ha sido útil esta solución?