JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<!--Observe click events-->
<a href="#" data-track="add">Add Item</a>

<!--Observe submit events-->
<form method="GET" action="#" data-track="search">
    <input data-track="search-up" type="search" name="search" />
    <button data-track="submit" type="submit">Submit</button>
</form>

http://codeblog.cz/vanilla/attributes.html#get-element-value
http://blog.garstasio.com/you-dont-need-jquery/events/
http://ryanmorr.com/maintain-responsiveness-by-capturing-unbound-action-events/
http://ryanmorr.com/understanding-scope-and-context-in-javascript/


<pre>
  ======== Focus Events ======== 
data-track-focus=""	
element.addEventListener("focus", function() {}, false);

data-track-blur=""
element.addEventListener("blur", function() {}, false);

======== Mouse Events ======== 
data-track-dblclick=""
element.addEventListener("dblclick", function() {}, false);

data-track-mouseup=""
element.addEventListener("mouseup", function() {}, false);

data-track-mousedown=""
element.addEventListener("mousedown", function() {}, false);

data-track-click=""
element.addEventListener("click", function() {}, false);

======== Keyboard Events ======== 
data-track-keydown=""
element.addEventListener("keydown", function() {}, false);

data-track-keypress=""
element.addEventListener("keypress", function() {}, false);

data-track-keyup=""
element.addEventListener("keyup", function() {}, false);

======== Touch events ======== 
data-track-touchend=""
element.addEventListener("touchend", function() {}, false);

data-track-touchstart="" 
element.addEventListener("touchstart", function() {}, false);

data-track-change=""
element.addEventListener("change", function() {}, false);

</pre>

JavaScript

(function(win){ 
    'use strict';

    var ActionObserver = {},
    docElement = win.document.documentElement, 
    listeners = {};

    // Listen for action events on the document when they bubble up
    docElement.addEventListener('click', onEvent, false);
    docElement.addEventListener('submit', onEvent, false);
  docElement.addEventListener('keyup', onEvent, false);

    // Handle action events (click, submit) on the document
    function onEvent(e){
        // Find the first ancestor element of the event target
        // containing the data-observe attribute
        var el = e.target.closest('[data-track]'), key;
        if(el){
            if(el.nodeName.toLowerCase() === 'form' && e.type !== 'submit'){
                return;
            }
            // Get the value of the data-observe attribute
            // to find the callback function and invoke it
            key = el.getAttribute('data-track');
            if(listeners.hasOwnProperty(key)){
                listeners[key](e, el);
            }
        }
    }

    // Map a callback function to the element in 
    // which you would like to observe action events on
    ActionObserver.bind = function(key, fn, ctx){
        listeners[key] = fn.bind(ctx || win);
    };

    win.ActionObserver = ActionObserver;

})(this);


ActionObserver.bind('add', function(event, element){
    // Process or queue request   
    console.log('add');
});

ActionObserver.bind('search', function(event, element){
    // Process or queue request     
        console.log('search');
});


ActionObserver.bind('search-up', function(event, element){
    // Process or queue request     
        console.log('search-up');
});