前端DOM兼容性问题

IE8事件模型和DOM事件模型有何不一样？如何处理DOM事件模型与IE8事件模型的兼容性

DOM的浏览器兼容性问题：
事件模型:
DOM：3个阶段:

1. 外向内：捕获
2. 目标触发
3. 内向外：冒泡
   IE8: 2个阶段
   没有捕获阶段
4. 目标触发
5. 内向外：冒泡

事件绑定:

DOM: elem.addEventListener(“click”,function(){},false)

#第三个参数capture: 是否在捕获阶段就提早触发

IE8: elem.attachEvent(“onclick”,function(){})

移除事件:

DOM: elem.removeEventListener(“click”,function(){},false)
  IE: elem.detachEvent(“onclick”,function(){})

得到事件对象的方法:

DOM: elem.addEventListener(“click”,function(e){ e->event })

IE8: 不会自动传入事件对象e
事件对象event始终保存在一个全局变量window.event中

elem.attachEvent(“onclick”,function(){
     var e=window.event
})

兼容全部浏览器的作法:

e=e||window.event;
得到目标元素:
DOM: e.target
IE8: e.srcElement

var target=e.target||e.srcElement;
阻止冒泡:
DOM: e.stopPropagation()
IE8: e.cancelBubble=true;

if(e.cancelBubble!==undefined){//IE8
     e.cancelBubble=true;
}else{//DOM
  e.stopPropagation()
}

阻止默认行为:
DOM: e.preventDefault();
IE8: 事件处理函数中: e.returnValue=false; 或return value

if(typeof e.preventDefault!==”function”){//IE8
     e.returnValue=false; //return false
}else{//DOM
  e.preventDefault();
}

定义一个函数，能够支持全部浏览器中的处理函数绑定:

function bindEvent(elem, eventName, handler){
    if(typeof elem.attachEvent!==”function”){//DOM
elem.addEventListener(eventName,handler)
}else{//IE8
elem.attachEvent(“on”+eventName,function(){
  //this->elem
  var e=window.event;
  e.target=e.srcElement;
  handler.call(this,e)
})
}
}
bindEvent(btn, “click”, function(e){
   this//当前事件冒泡到的父元素
   var target=e.target; //目标元素
})