兼容IE浏览器和DOM浏览器的事件对象

    虽然DOM和IE中的event对象不同，但基于他们的相似性依旧可以拿出跨浏览器的方案来。IE中event对象全部信息和方法DOM方法中都有，只不过实现的方法不一样，这种对应关系让实现两种事件模型之间的映射非常容易。创建EventUtil对象，如下：

var EventUtil = {
    addHandler: function(element, type, handler){ // 添加事件处理程序
        if(element.addEventListener){ // 存在DOM2级方法
            element.addEventListener(type, handler, false); // false表示在冒泡阶段触发
        } else if(element.attachEvent) { // IE, 加 "on"是为了兼容IE8及以前的浏览器
            element.attachEvent("on" + type, handler);
        } else { // DOM0级方法，一般不会执行
            element["on" + type] = handler;
        }
    },
    removeHandler: function(element, type, handler){ // 添加事件处理程序
        if(element.removeEventListener){ // 存在DOM2级方法
            element.removeEventListener(type, handler, false); // false表示在冒泡阶段触发
        } else if(element.detachEvent) { // IE, 加 "on"是为了兼容IE8及以前的浏览器
            element.detachEvent("on" + type, handler);
        } else { // DOM0级方法，一般不会执行
            element["on" + type] = null;
        }
    },
    getEvent: function(event) { // 获取事件对象
        return event ? event : window.event; // IE中的event是undefined，需要通过window.event获取   
    },
    getTarget: function(event) { // 获取事件的目标
        return event.target || event.srcElement; // IE中srcElement才是事件的真是目标
    },
    preventDefault: function(event) { // 阻止默认行为，例如a标签自动跳转
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    // 由于IE9以前不支持事件捕获，所以在跨浏览器情况下，这里只能阻止事件冒泡
    stopPropagation: function(event) { 
        if(event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}