前端DOM兼容性问题

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

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

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

事件绑定:

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; //目标元素 })