JavaScript DOM事件中一些对于浏览器的兼容问题

1、绑定事件处理程序

function addEvent(element,type,func){
    if(element.addEventListener){
        element.addEventListener(type,func,false);
    }else if(element.attachEvent){//兼容IE
        element.attachEvent("on"+type,func);
    }else{
        element["on"+type] = func;
    }
}

addEventListener是W3C DOM中提供的注册事件监听器的方法，优点在于：

1、我们知道传统的onclick等方法是只能一个事件绑定一个方法，如果绑定多个方法，下一个方法会覆盖上一个方法，只能是最后一个生效，但是使用addEventListener是允许给一个事件注册读个监听器的

2.可以选择冒泡或者捕获两种方式来触发事件，更加精确地控制事件（第三个参数），false为事件冒泡，true为事件捕获

3.对所有的DOM元素都是有效的

attachEvent是兼容IE8及以下版本的注册事件监听方法，而且它只支持事件冒泡

“on”+ type 是在不支持addEventListener和attachEvent的前提下提供的， 最原始的事件绑定方法，兼容所有浏览器

2.移除事件处理程序

function removeEvent(element,type,func){
    if(element.removeEventListener){
        element.removeEventListener(type,func,false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type,func);
    }else{
        element["on"+type] = false;
    }
}

这个和第一点绑定事件处理是一样的，对照就好

3.取消元素默认行为

function preventDefault(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}

preventDefault是当事件采用了addEventListener的注册监听器的事件使用的取消元素默认行为的方法

returnValue = false是兼容IE的方法

4.获取event的target目标

function getTarget(event){
    return event.target||event.srcElement;
}

IE支持的是window.event.srcElement，firefox支持的是 window.event.target

5.获取各种位置

event.clientX 和 event.clientY

鼠标相对于浏览器窗口可视区（不包括工具栏和滚动条）的X，Y坐标。IE事件和标准事件都支持

event.pageX 和 event.pageY

不同于event.clientX 和 event.clientY的是他们相对于文档坐标。不是标准属性而且IE事件中没有这两个属性

event.offsetX 和 event.offsetY

鼠标相对于事件源元素（target/srcElement）的X，Y坐标，IE事件有，标准事件中没有

event.screenX 和 event.screenY

鼠标相对于显示器屏幕左上角的X, Y坐标。IE事件和标准事件都支持