JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">Test</div>

JavaScript

(function($) {
  $.fn.extend({
    trigger: function(type, data) {
      return this.each(function() {
        if (typeof type == "string" && type.startsWith("test:")) {
          this.dispatchEvent(new window.CustomEvent(type, data));
        } else {
          jQuery.event.trigger(type, data, this)
        }
      });
    }
  });
})(jQuery);

test = document.querySelectorAll('.test')[0];
test.addEventListener('click', function() {
  console.log('click')
});
test.addEventListener('test:custom', function(ev) {
  console.log('test:custom', ev.detail)
});

// Custom Native -> Native works as expected
test.dispatchEvent(new window.CustomEvent('test:custom', {
  detail: 'dispatchEvent'
})); // -> "custom" "detail"

$(test).trigger('click'); // -> "click"

$(test).trigger('test:custom', {
  detail: 'jquery'
});