Dispatch jQuery events as regular DOM events

jquery_event_delegator.coffee

# ~ Dispatch jQuery events as regular DOM events ~
#
# Delegated events are given a new name in the format `jquery:<original event name>`.
# If you delegate `ajax:send` you will be able to listen for `jquery:ajax:send`
# on native event listeners such as Stimulus actions and `EventTarget.addEventListener`.
#
# Notes:
#   * The first parameter must be called "event".
#   * The parameters can be accessed as members on the `event.detail` object.
#
# Example:
#   delegate 'ajax:send', parameters: ['event', 'xhr']
#   document.addEventListener 'jquery:ajax:send', (event) -> console.log(event.detail)
#
delegate = (eventName, {parameters}) ->
  handler = (args...) ->
    data = {}
    data[name] = args[index] for name, index in parameters
    delegatedEvent = new CustomEvent("jquery:#{eventName}",
      bubbles: true,
      cancelable: true,
      detail: data)
    data.event.target.dispatchEvent(delegatedEvent)
  $(document).on(eventName, handler)

In case someone needs this in JS:

const delegate = function (eventName, parameters) {
  const handler = (...args) => {
    const data = {}
    parameters.forEach((name, i) => data[name] = args[i]);
    const delegatedEvent = new CustomEvent("jquery:" + eventName, {
        bubbles: true,
        cancelable: true,
        detail: data
      }
    )
    data.event.target.dispatchEvent(delegatedEvent)
    console.log(delegatedEvent);
  }
  $(document).on(eventName, handler)
};

I wish I'd seen this thread a long time ago!

I ended up creating jquery-events-to-dom-events to handle this problem in a way that would drop right into Stimulus controllers.