JS-兼容-CSDN博客

本文链接：https://blog.csdn.net/li_jia_h/article/details/121153416

浏览器滚动条距离兼容
document.documentElement.scrollTop

document.documentElement.scrollLeft

document.body.scrollTop

document.body.scrollLeft

//垂直方向
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//水平方向
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

获取元素样式兼容
调用函数进行兼容处理

   function getStyle(ele) {
                    if (ele.currentStyle) {
                        //IE9以下
                        var style1 = ele.currentStyle.opacity
                    } else {
                        //非IE9以下
                        var style1 = window.getComputedStyle(ele).opacity
                    }
                    return style1;
                }

事件监听兼容
addEventListener：在非IE9以下使用

语法：元素.addEventListener(事件类型,事件处理函数,冒泡或捕获)

attachEvent：在IE9以下使用

语法：元素.attachEvent(事件类型,事件处理函数)

移出事件监听：

removeEventListener：在非IE9以下使用

语法：元素.removeEventListener(事件类型，事件处理函数)

detachEvent：在IE9以下使用

语法：元素.detachEvent(事件类型,事件处理函数)

两种事件监听的区别：

1、参数个数不一样

2、兼容的浏览器不一样

3、参数中的事件类型不一样

4、执行顺序不一样

获取事件目标兼容

box.onclick=function(e){
            //事件对象兼容
            var e = e || window.event
            //事件目标兼容
            var target=e.target || e.srcElement
            }