Cross Browser Event Handling

HTML

<div id="txt" class="light">
    <p>Text in here</p>
<a href="https://www.google.com">Light</a>

<a href="https://www.google.com">Dark</a>

</div>

CSS

.light {
    color:black;
    background-color:white;
}
.dark {
    color:white;
    background-color:black;
}

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 txt = document.getElementById("txt"),
        buttons = document.getElementsByTagName("a"),
        buttonClick = function (e) {
            var target = evtUtil.getTarget(e).innerHTML.toLowerCase();
            txt.className = target;
            evtUtil.preventDefault(e);
        }
    for (var i = 0, len = buttons.length; i < len; i = i + 1) {
        evtUtil.addEvent(buttons[i], "click", buttonClick);
    }

}());