跨浏览器的事件对象

由于ie和其它浏览器的区别，在对DOM进行事件注册的和使用event对象的时候，需要一种快捷的封装好的工具方法。

var EventUtil = {
  addHandler: function(element, type, handler) {
    if (element.addEventListener) { //dom2级事件处理程序
        element.addEventListener(element, type, handler);
    } else if (element.attachEvent) { //检测ie的事件处理程序
        element.attachEvent('on' + type, handler);
    } else {
        element['on' + type] = handler; //dom0级事件处理程序
    }
  },
  
  getEvent: function(event) {
    return event ? event : window.event;
  },

  getTarget: function(event) {
    return event.target ? event.target : event.srcElement;
  },

  preventDefault: function(event) { //阻止默认行为，比如链接的跳转，表单的提交
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false; //ie下阻止默认行为
    }
  },

  removeHandler: function(element, type, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(element, type, handler);
    } else if (element.detachEvent) {
        element.detachEvent('on' + type, handler);
    } else {
        element['on' + type] == null;
    }
  },

//由于事件在dom层中传播会造成事件捕捉和事件冒泡，这里直接在元素上添加事件而阻止其在  
  dom中传播
  stopPropagation: function(event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
  }
};

上面就是封装的一个工具对象用法大概如下

oDiv.onclick = function(event) {
  event = EventUtil.getEvent(event);
  var target = event.getTarget(event);
  EventUtil.stopPropgation(event);
}