跨浏览器的事件对象

由于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);
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容