JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testing"></div>

JavaScript

events = {"changeMode": ["mode1"], "changeKeymap": ["keymap1"]}

for(event in events) {
  listeners = events[event];
  for (i=0; i<listeners.length; i++)
  {
    listn = listeners[i]
    console.log("Activate listener", listn, " For event: ", event);
    $("#testing").on(event, function(e, d) {
      console.log("Event: ", event);
  	  var eventName = listn;
	 console.log("Listener invoked is: ", eventName);

      console.log("Event which is passed is: ", e);
      console.log("Data is: ", d);
    });
  }
}

$("#testing").trigger("changeMode", "random data");