JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div data-e="click" data-a="helloWorldClick">
  hello world
</div>

CSS

span {
  display: none;
}

JavaScript

var initEvents = function(actions) {
	actions = actions || false;
  if (!actions) { console.log('ERR: Incorrect actions.'); }
  var params = {
  	'document':$(document),
    'attrDataEvents':'data-e',
    'attrDataAction':'data-a',
    'dataActionSplit':',',
    'initEvents':['click','change'],
    'instantPrevent':true
  };
  var eApp = {
  	'init':function(){
    	$.each(params.initEvents,function(i,e){ eApp.addEvent(e); });
    },
  	'addEvent':function(event){
    	params.document.on(event,'['+params.attrDataEvents+'="'+event+'"]',function(e){
      	if (params.instantPrevent) { e.preventDefault(); }
        var $this = $(this);
        var thisAction = $this.attr(params.attrDataAction).split(params.dataActionSplit);
        var thisActionName = thisAction[0];
        var data = {
        	'originalEvent':e,
          'this':$this,
          'action':thisActionName,
          'actionArray':thisAction
        };
        if (actions[thisAction]) { actions[thisAction](data); }
        else { console.log('ERR: Incorrect actions.'); console.log(data); console.log('------------------')}
      });
    }
  };
  eApp.init();
};


var acts = {
	'helloWorldClick':function(){ alert(123); }
};

initEvents(acts);