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

﹏ヽ暗。殇╰゛Y 2022-06-18 10:13 191阅读 0赞

元素 . 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;  
    \}  
\}