JSFiddle - React, Tailwind, and code Playground

by ChaseWest

HTML

<div id="name">Name</div>
<div class="name">Class</div>

JavaScript

//Need a global object to append everything to
var project = {};

/* actions.js */
;(function(project){

    project.actions = {
        handleDivIdClick: function(){
            this.setAttribute("style", "background-color: blue");
        },
        handleDivClassClick: function(){
            this.setAttribute("style", "background-color: green");
        },
        handleDivIdMouseOver: function(){
            this.setAttribute("style", "background-color: red");
        }
	};
    
})(project || {});


/* events.js */
;(function(project){
    
    project.events = {
        'div#name': {
            'click': project.actions.handleDivIdClick,
            'mouseover': project.actions.handleDivIdMouseOver
        },
        'div.name':{
            'click': project.actions.handleDivClassClick
        }
    };

})(project || {});

/* util.js */
;(function(project){
    project.util = {};
    
    project.util.bind = function(){
        var events = project.events;
        
        for(var e in events){
           
            if(events.hasOwnProperty(e)){
                var element = document.querySelector(e);
                
                for(var i in events[e]){
                    if(events[e].hasOwnProperty(i)){
                        element.addEventListener(i, events[e][i]);  
                    }
                    
                } 
            }
            
        }
    };

})(project || {});

/* project.js */

//Bind all the events
project.util.bind()