How to Handle Browser Events using JavaScript

This article will cover how to JavaScript to handle browser events. Such as: Add/Attach event, Remove Event, onpropertychange, block/cancel event, add event to window.onload and how to get the target element of the event.

1. Attach/Add Event

var addEvent = function( obj, type, fn ) {
    if (obj.addEventListener)
        obj.addEventListener( type, fn, false );
    else if (obj.attachEvent) {
        obj["e"+type+fn] = fn;
        obj.attachEvent( "on"+type, function() {
            obj["e"+type+fn]();
        } );
    }
};

Another Version:

var addEvent = (function () {
    if (document.addEventListener) {
        return function (el, type, fn) {
            el.addEventListener(type, fn, false);
        };
    } else {
        return function (el, type, fn) {
            el.attachEvent('on' + type, function () {
                return fn.call(el, window.event);
            });
        }
    }
})();

2. Remove Event 

3. onpropertychange event.

onpropertychange is only supported in IE, And Firefox, Safari, Chrome and Opera has "oninput", which is similar but only support the "value" property of textfield and textarea.

var addPropertyChangeEvent = function (obj,fn) {
    if(window.ActiveXObject){
        obj.onpropertychange = fn;
    }else{
        obj.addEventListener("input",fn,false);
    }
}

4. Add event to window.onload

var loadEvent = function(fn) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = fn;
    }else {
        window.onload = function() {
            oldonload();
            fn();
        }
    }
}

5. Block/Cancel Event

var cancelEvent = function(event) {
    event = event||window.event
    if (event.preventDefault) {
        event.preventDefault(  );
        event.stopPropagation(  );
    } else {
        event.returnValue = false;
        event.cancelBubble = true;
    }
}

6. Get the event Target, the element which trigger the event

var getEvent = function(event){
    event = event || window.event;
    var obj = event.srcElement ? event.srcElement : event.target;
    return obj
}