跨浏览器的事件侦听器和事件对象

为跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法做了下总结，并把这些方法打包。<高级程序设计>里面建议使用此封装方法，可跨浏览器实现事件。我下篇博客里，有介绍惰性载入方式，判断分支只需一次。
惰性载入

  var EventUtil = {
    // 添加侦听事件
    addEventListener: function(element, type, handler) {
      // IE9+、Firefox、Safari、chrome和Opera
      if (element.addEventListener) {
        element.addEventListener(type, handler, false);
      }
      // IE8-
      else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
      } else {
        element["on" + type] = handler;
      }
    },

    // 移除侦听事件
    removeEventListener: function(element, type, handler) {
      // IE9+、Firefox、Safari、chrome和Opera
      if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
      }
      // IE8-
      else if (element.detachEvent) {
        element.detachEvent("on" + type, handler);
      } else {
        element["on" + type] = null;
      }
    },

    // 获取事件对象
    getEvent: function(event) {
      return event ? event : window.event;
    },

    // 获取触发事件的元素
    getTarget: function(event) {
      return event.target || event.srcElement;
    },

    // 获取事件类型
    getType: function(event) {
      return event.type;
    },

    // 获取按键键码
    getCharCode: function(event) {
      if (typeof event.keyCode == "number") {
        return event.keyCode; // IE8-、Firefox和opera
      } else {
        return event.charCode;
      }
    },

    // 获取鼠标相对于文档的位置,即页面座标位置
    getPagePosition: function(event) {
      var pageX = event.pageX,
        pageY = event.pageY;
      if (pageX == undefined) {
        pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
      }
      if (pageY == undefined) {
        pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
      }
      return {
        pageX: pageX,
        pageY: pageY
      };
    },

    // 阻止事件的默认行为
    preventDefault: function(event) {
      if (event.preventDefault) {
        event.preventDefault();
      } else {
        event.returnValue = false; // IE浏览器
      }
    },

    // 阻止事件冒泡
    stopPropagation: function(event) {
      if (typeof event.cancelBubble == "undefined") {
        event.stopPropagation();
      } else {
        event.cancelBubble = true; // IE浏览器
      }
    }

测试代码：

<div id="box" style="color:red;width: 100%;height:200px;" >
     <input type="button" value="点击" id="btn" />
</div>
<a href="http://www.test.com" id="a">test</a>

var box = document.querySelector("#box");
    box.onclick = function(event) {
        event = EventUtil.getEvent(event);
        alert(EventUtil.getType(event));
        alert(EventUtil.getTarget(event));
    };
    var input = document.querySelector("input");
    input.onclick = function(event) {
        event = EventUtil.getEvent(event);
        EventUtil.stopPropagation(event);
    };

    var a = document.getElementById("a");
    a.onclick = function(event) {
        event = EventUtil.getEvent(event);
        EventUtil.preventDefault(event);
    };