JS事件中的兼容问题

1. 事件对象event的兼容问题

    IE9+ :  event                      IE9- : window.event

e = e || window.event;
可简写为:
e = e || event;

2. 获取鼠标位置 pageX, pageY 的兼容问题

    e.clientX / e.clientY     无兼容问题 (获取到页面可视框的距离)   

    e.pageX / e.pageY    IE9+ (9-不兼容)

function getXY(e){
            e = e || window.event;
            var x = 0,
                y = 0;
            if(e.pageX){
                x = e.pageX;
                y = e.pageY;
            }else{
                var cleft = document.documentElement.scrollLeft;
                var ctop = document.documentElement.scrollTop;
                x = cleft + e.clientX;
                y = ctop + e.clientY;
            }
            return {x:x,y:y};
        }

3. 添加事件的兼容问题

    element.addEventListener(type, function, boolean);

    elemnet.attachEvent(type, function, boolean);    IE

function bind(el, type, callBack){
            if(el.addEventListener){
                el.addEventListener(type, callBack);
            }else{
                el.attachEvent("on"+type, callBack);
            }
        }

4. 事件对象获取目标事件对象的兼容问题

    event有两个属性:

                1. 获取当前事件对象(e.currentTarget)

                2. 获取目标事件对象(e.target / e.srcElement)

var target = e.target || e.srcElement;

当前事件对象就是添加了监听事件的对象,而目标事件对象可能不一样,举例说明吧

<div id="box"><span>点我</span></div>

给div注册点击事件,当前对象就是div,鼠标点div时目标事件是div,而鼠标点span标签时,目标事件是span,点谁谁是目标事件对象,其他的事件也一样.