IE8及兼容总结与注意事项

1、addEventListener、removeEventListener 和attachEvent，detatchEvent

（1）兼容性问题（标准浏览器）

在标准浏览器中（包括IE9和IE9以上浏览器），要使用addEventListener()和removeEventListener()函数注册和删除注册处理函数。

语法：element.addEventListener('event', eventListener, useCapture);

此函数具有三个参数：

第一个参数是事件类型名称

第二个参数就是要注册的事件处理函数

第三个函数规定此处理函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用，在默认条件下，此属性值为false么也就是在冒泡阶段调用事件处理函数。

特别说明:第一个参数不能够带有“on”，例如点击事件不能写为“onclick”，而要写成“click”。

使用removeEventListener()函数可以解除原来注册的事件处理函数，格式和addEventListener()函数式一样的。

语法：element.removeEventListener('event', eventListener, useCapture);

（2）兼容性问题（IE）

在IE8及以下浏览器中可以使用attachEvent()和detachEvent()方法为指定对象注册事件处理函数和删除注册的事件处理函数。

语法：element.attachEvent("onevent",eventListener)

此函数具有两个参数

第一个参数是事件类型的名称

第二个参数就是要注册的事件处理函数。

特别说明:第一个参数的必须带有on，例如点击事件就要写成”onclick”。

使用detachEvent()函数可以解除原来注册的事件处理函数，格式和attachEvent()函数式一样的。

语法：element.detachEvent("onevent",eventListener)

（3）兼容性写法

var EventUtil={
    //注册
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
          } else {
               element["on" + type] = handler;
                }
    },
    //移除注册
    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
             element.detachEvent("on" + type, handler);
           } else {
                element["on" + type] = null;
             }
        } 
    };

2、事件对象

（1）兼容性问题

在IE8及以下的浏览器中，事件处理函数中使用的时间对象是window.event，IE8以上浏览器既可以使用window.event也可以使用传递的事件对象，不过火狐浏览器只能够使用传递的事件对象。IE中事件对象是作为全局对象( window.event )存在的，Firefox中则是做为句柄( handler )的第一个参数传入内的。

（2）兼容性写法

var ev=window.event||ev

例如：

window.onload=function(){
var mydiv=document.getElementById("mydiv");
var myspan=document.getElementById("myspan");
mydiv.onmousemove=function(ev){
var ev=ev||window.event;
myspan.innerHTML="X:"+ev.clientX+"Y:"+ev.clientY;
}
}

3、event.target和event.srcElement

（1）兼容性问题：

在标准浏览器和IE9及以上浏览器中事件目标为event.target

在IE6~8浏览器中事件目标为event.srcElement

（2）兼容性写法

target=event.srcElement||event.target;

例如：

window.onload=function(){
    var table=document.getElementById("mytable");
    table.onclick=function(e){
        var event=e||window.event;
        target=event.srcElement||event.target;
    alert(target.innerHTML);
    }
}

4、event.stopPropagation()和event.cancleBubble=true

（1）兼容性问题：

在标准浏览器和IE9及以上浏览器中阻止冒泡event.stopPropagation()

在IE6~8浏览器中阻止冒泡event.cancleBubble=true

（2）兼容性写法

if（event.stopPropagation）{
       event.stopPropagation()；
}else{
       event.cancleBubble=true；
 }

event.preventDefault()和event.returnValue=false

（1）兼容性问题

在标准浏览器和IE9及以上浏览器中阻止默认行为event.preventDefault()

在IE6~8浏览器中阻止默认行为event.returnValue=false

（2）兼容性写法

if（event.preventDefault）{
       event.preventDefault()；
}else{
      event.returnValue=false；
 }

getComputedStyle和currentStyle

（1）兼容性问题

标准浏览器和IE9及以上浏览器用 getComputedStyle获取样式

IE8及以下浏览器用currentStyle获取样式

（2）兼容性写法

function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }
        else{
            return getComputedStyle(obj)[attr];
        }
    }