DOM的浏览器兼容性问题

DOM的浏览器兼容性问题

一、事件模型

DOM：3个阶段

1. 外向内：捕获
2. 目标触发
3. 内向外：冒泡

IE8：2个阶段

​ 没有捕获阶段

1. 目标触发
2. 内向外：冒泡

二、事件绑定

//DOM:
elem.addEventListener("click",function(){},false);
//第三个参数capture：是否在捕获阶段就提前触发

//IE8：
elem.attachEvent("onclick",function(){});
//由于IE8没有捕获阶段，所有没有第三个参数

三、移除事件

//DOM
elem.removeEventListener("click",function(){},false);
//第三个参数要对应绑定时的值
//IE8
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;
})
//兼容所有浏览器的方法
var 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 false;
//兼容写法
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(){
            var e=window.event;
            e.target=e.srcElement;
            handler.call(this,e);
        })
    }
}
//调用函数
bindEvent(btn,"click",function(e){
    this//当前事件冒泡到的父元素
    var target=e.target;//目标元素
})