JSFiddle - React, Tailwind, and code Playground

HTML

<div id='messages'>No Events Triggered Yet</div>
  

    <div class='global'>
      <button id='global_namespace' class="ui-state-error">global event: bacon.goodStuff</button>
      <button id='global_longname'>global event: bacon</button>
    </div>
    <div class='element'>
      <button id='element_namespace'>element event: bacon.goodStuff</button>
      <button id='element_longname'>element event: bacon</button>
    </div>
    <div class='custom'>
      <button id='custom_namespace'>custom event: bacon.goodStuff</button>
      <button id='custom_longname'>custom event: bacon</button>
    </div>

JavaScript

$('#messages').bind('bacon',
    function(e, args){
        $(this).empty().append('handled '+args.content+': '+e.type);
});

      
$('#global_namespace').click(function(e){
    $.event.trigger('bacon.goodStuff', {content: 'global event'});
});
$('#global_longname').click(function(e){
    $.event.trigger('bacon', {content: 'global event'});
});
$('#element_namespace').click(function(e){
    $('#messages').trigger('bacon.goodStuff', {content: 'element event'});
});
$('#element_longname').click(function(e){
    $('#messages').trigger('bacon', {content: 'element event'});
});
    
$('#custom_namespace').click(function(e){
    var event = jQuery.Event('bacon.goodStuff');
    $('#messages').trigger(event, {content: 'custom event'});
});

$('#custom_longname').click(function(e){
     var event = jQuery.Event('bacon');
     $('#messages').trigger(event, {content: 'custom event'});
});