事件对象的兼容及添加和删除事件的兼容

1. 

元素 . addEventListener () 

给一个元素添加事件（添加事件监听）；

传两个参数 第一个为事件名 例如 “click” 记得不要加on，第二个是要添加的函数；

其实还有第三个参数，不填默认值是false，表示事件冒泡；

  填true的话 表示事件捕获，事件捕获与事件冒泡只想顺序相反，一般我们用事件冒泡，所以第三个参数不填也可以；

元素.removeEventListener()

给元素删除事件；

也是传两个参数 不带on的事件名，和要删除的函数名字；

但是IE9以下不支持它们；

IE9以下给元素添加事件：

元素. attachEvent(); 

也是两个参数，带on的事件名，和要添加的函数；它没有第三个参数，所以也就没有事件捕获

删除事件： 

元素. detachEvent(); 

两个参数：带on的事件名，和要删除的函数名

2 .兼容IE9以下浏览器 获取页面被卷去的宽和高：


function myScroll() {


    return {
        scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,


        scrollLeft : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft


    }
}




3. 兼容IE9以下浏览器页面的可视宽和高：


function myClient() {


    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,


        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
    };
}


4.兼容IE9以下浏览器 获取页面水平方向的坐标：


function getPageX(e){


    if(e.pageX){


        return e.pageX;


    }else{


        return myScroll().scrollLeft + e.clientX;
    }
}


    兼容IE9以下浏览器，获取页面垂直方向的坐标：


function getPageY(e){


    if(e.pageY){


        return e.pageY;


    }else{


        return myScroll().scrollTop + e.clientY;
    }
}

1. 

元素 . addEventListener () 

给一个元素添加事件（添加事件监听）；

传两个参数 第一个为事件名 例如 “click” 记得不要加on，第二个是要添加的函数；

其实还有第三个参数，不填默认值是false，表示事件冒泡；

  填true的话 表示事件捕获，事件捕获与事件冒泡只想顺序相反，一般我们用事件冒泡，所以第三个参数不填也可以；

元素.removeEventListener()

给元素删除事件；

也是传两个参数 不带on的事件名，和要删除的函数名字；

但是IE9以下不支持它们；

IE9以下给元素添加事件：

元素. attachEvent(); 

也是两个参数，带on的事件名，和要添加的函数；它没有第三个参数，所以也就没有事件捕获

删除事件： 

元素. detachEvent(); 

两个参数：带on的事件名，和要删除的函数名

2 .兼容IE9以下浏览器 获取页面被卷去的宽和高：


function myScroll() {


    return {
        scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,


        scrollLeft : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft


    }
}




3. 兼容IE9以下浏览器页面的可视宽和高：


function myClient() {


    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,


        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
    };
}


4.兼容IE9以下浏览器 获取页面水平方向的坐标：


function getPageX(e){


    if(e.pageX){


        return e.pageX;


    }else{


        return myScroll().scrollLeft + e.clientX;
    }
}


    兼容IE9以下浏览器，获取页面垂直方向的坐标：


function getPageY(e){


    if(e.pageY){


        return e.pageY;


    }else{


        return myScroll().scrollTop + e.clientY;
    }
}