JSFiddle - React, Tailwind, and code Playground

by Dimitar Christoff

HTML

<a href="#"><button>hi</button></a>

JavaScript

(function() {
        var storage = this.storage = {}; // make it puncturable
    
        var get = function(uid){
            return (storage[uid] || (storage[uid] = {}));
        };
    
        Element.implement({
           retrieve: function(property, dflt){
                var storage = get($uid(this)), prop = storage[property];
                if (dflt != null && prop == null) prop = storage[property] = dflt;
                return prop != null ? prop : null;
            },
        
            store: function(property, value){
                var storage = get($uid(this));
                storage[property] = value;
                return this;
            },
        
            eliminate: function(property){
                var storage = get($uid(this));
                delete storage[property];
                return this;
            }
     
            
        });
        
    })();
    
    // read it. 
    var link = document.getElement("a");
    var uid = link.uid; // will reference the mootools unique id for it
    
    // add an event handler
    link.addEvent("click", function(e) {
        console.log("hi");
        this.destroy();
        // see what's left in storage for that element.
        console.log(storage[uid]);
    
        // storage should be empty.
        console.log(storage);
    });
    
    link.getFirst().addEvent("mouseenter", function() {
       console.log("over");
    });

    // check to see if it is there via element storage API.
    console.log(link.retrieve("events").click);

    // check to see if it's there via our puncture
    console.log(this.storage[uid]);
    
    // see all events in storage, inc child element:
    console.info(this.storage);