跨瀏覽器的事件偵聽器和事件對象

爲跨瀏覽器實現添加事件偵聽器和跨瀏覽器事件對象的使用方法做了下總結，並把這些方法打包。<高級程序設計>裏面建議使用此封裝方法，可跨瀏覽器實現事件。我下篇博客裏，有介紹惰性載入方式，判斷分支只需一次。
惰性載入

  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);
    };