JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <!-- note: click overrided by mouseover -->
<a href="#" class="js-test" data-events="click mouseout mouseover">Test 1</a>
<a href="#" class="js-test" data-events="mouseover">Test 2</a>
</div>
<button id="test">Insert test links</button>

JavaScript

$(document).ready(function() {
eventFnArray = [];
eventFnArray["click"] = function(e) { 
    if(e.type != "click") return ;
    alert("click event fired - do xyz here");
    // do xyz
};
eventFnArray["mouseover"] = function(e) { 
    if(e.type != "mouseover") return ;
    alert("mouseover fired - do abc here"); 
    // do abc
};
eventFnArray["mouseout"] = function(e) { 
    if(e.type != "mouseout") return ;
    alert("mouseout fired - do JKL here"); 
    // do JKL
};

$('.js-test').each( (function(fn) { 

   return function(i) {   
     if(i != 0) return;
     var _that = this;
     var events = [];
     events = $(_that).attr("data-events").split(" ");

     alert($(_that).attr("data-events") + " : " + events.join(" "));
    
       $(this).parent().on(
         events.join(" "), 
         '.js-test', 
          function() {
              console.info("hello - this is the " + event.type + " event");
//             alert("data-events = " + $(this).attr("data-events") + " : event.type = " + event.type);
              // delegate to the correct event handler based on the event type
              if($(this).attr("data-events").indexOf(event.type) != -1)
                  fn[ event.type ](event);
          }
       );
   }
})(eventFnArray));    // pass function array into closure

    $('#test').click( function() {
           // adds a link with the click event attached.
    $('#container').append("<a href='#' class='js-test' data-events='click'>TEst333</a>");

    // adds a link with the mouseover event 
    $('#container').append("<a href='#' class='js-test' data-events='mouseover'>TEst444</a>&nbsp;&nbsp;");

    // adds a link with mouseout
    $('#container').append("<a href='#' class='js-test' data-events='mouseout'>TEs555</a>&nbsp;&nbsp;");

    // adds a link with both mouseover and mouseout attached
    $('#container').append("<a href='#' class='js-test' data-events='mouseout mouseover'>TEstLast</a>&nbsp;&nbsp;");

    // mouseout and click
   ...