Estoy escribiendo un complemento que eventualmente se usará en diferentes sitios. El complemento se comunica con el resto de la página en función de los eventos. Hasta aquí todo bien.
Ahora aquí está el truco: algunos sitios existentes usan JS puro para escuchar y enviar eventos, algunos usan JQuery. El complemento en sí no debe usar jQuery (por diferentes razones), sino solo JS puro. Entonces, el objetivo es básicamente escuchar y enviar eventos similares a jQuery sin jQuery.
¿Cómo pueden trabajar juntos los eventos JS puros y los eventos jQuery, especialmente con datos personalizados adjuntos al evento?
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)Aquí está el codepen: https://codepen.io/st_h_/pen/WNMYPBQ
JQuery tiene su propia capa de eventos encima de Vanilla, por lo que no es realmente posible capturar eventos de JQuery en Vanilla JavaScript.
Una opción es usar JQuery para escucharlos y repetirlos como eventos DOM normales, que es exactamente lo que hace jquery-events-to-dom-events .
Pero entonces todavía estás usando JQuery, un poco...
Gracias por vincular un codepen a tu código :D
Lo primero que debe hacer es "convertir" su elemento jQuery en uno "JS puro". Al hacer un .get(0) , ahora puede usar la función dispatchEvent con un CustomEvent que estaríamos haciendo con el valor de entrada como la opción de detail , realmente necesita ser detalle y no valor .
$button.bind("click", () => { const event = new CustomEvent('update', { detail: $input.val() }); $h1.get(0).dispatchEvent(event); }); Y luego, el único cambio que necesitaría hacer en su oyente uniforme sería usar la propiedad detail en lugar de value .
_h1.addEventListener("update", function(e){ this.innerText = e.detail || "no event.detail" });