JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<button data-event="doClick">Click Me</button>

<input data-event="doWrite" data-method="keyup" type="text" />

<pre></pre>

CSS

body{
    padding:20px;
}
button, input, pre{
    display:block;
    margin-bottom:30px;
}

JavaScript

var myApp = myApp || (function($) {

    var Events = {};

    Events = {
        endpoints: {
            doClick: function(e) {
                $('pre')[0].innerHTML += "Click\n";
            },
            doWrite: function(e){
                var value = this.value;
                $('pre')[0].innerHTML += "\""+value+"\"\n"
            }
        },
        bindEvents: function() {
            $('[data-event]').each(function() {
                var $this = $(this),
                    method = $this.attr('data-method') || 'click', 
                    name = $this.attr('data-event'), 
                    binded = $this.attr('data-binded') == 'true';

                if (typeof Events.endpoints[name] != 'undefined') {
                    if (!binded) {
                        $this.attr('data-binded', 'true');
                        $this.on(method, Events.endpoints[name]);
                    }
                }
            });
        }
    };

    function initialize() {
        Events.bindEvents();
    }


    return {
        init: initialize
    };

})(window.jQuery);

jQuery(document).ready(myApp.init);