DOM 兼容性
**1. 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; //目标元素
})**