Event Delegation

by Susan Delgado

HTML

<p>Text in here</p>
<a data-class="white" href="#">white</a>

<a data-class="black" href="#">black</a>

<button data-class="blue">blue</button>
<a href="https://www.google.com">go to site</a>

CSS

.white {
    color:black;
    background-color:white;
}
.black {
    color:white;
    background-color:black;
}
.blue{
    color:yellow;
    background-color:blue;
}

JavaScript

(function () {
    var evtUtil = {
        //cross browser Events
        addEvent: function (el, type, fn) {
            if (typeof addEventListener !== "undefined") {
                el.addEventListener(type, fn, false);
            } else if (typeof attachEvent !== "undefined") {
                el.attachEvent("on" + type, fn);
            } else {
                el["on" + type] = fn;
            }
        },
        removeEvent: function (el, type, fn) {
            if (typeof removeEventListener !== "undefined") {
                el.removeEventListener(type, fn, false);
            } else if (typeof detachEvent !== "undefined") {
                el.detachEvent("on" + type, fn);
            } else {
                el["on" + type] = null;
            }
        },
        getTarget: function (event) {
            if (typeof event.target !== "undefined") {
                return event.target;
            } else {
                return event.srcElement;
            }
        },
        preventDefault: function (event) {
            if (typeof event.preventDefault !== "undefined") {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        }
    };
    // ------------------------------------------ //
    var func = function (e) {
        var target = evtUtil.getTarget(e),
            classData = target.getAttribute("data-class");
        //all capital letters 
        if (classData) {
            evtUtil.preventDefault(e);
            if(e.type === "click"){
                document.body.className = "";
            }else{
                document.body.className = classData;
            }
            
        };
    };
    evtUtil.addEvent(document, "click", func );
    
    evtUtil.addEvent(document, "mouseover", func);
}());