javascript的兼容问题：bind()函数，getStyle()函数，事件对象event，scroll滚动距离查询的兼容性问题。

1.bind()函数。

兼容性：因为addEventListener（）方法不支持IE8及以下浏览器，但是IE中有attachEvent这个方法，所以我们可以自己构造一个函数实现所有浏览器的兼容性问题。

第一个参数：表示要绑定事件的对象

第二个参数：事件类型（字符串类型，且不用加on）

第三个参数：回调函数

addEventListener与attachEvent的区别：

1. addEventListener中第三个参数表示是否在捕获阶段触发事件爱你，是则true，反之false，一般都是在冒泡阶段触发事件，所以一般都是false。
2. addEventListener中的回调函数中的是以对象的方法调用的，所以里面的this是我们的obj对象，但是attachEvent中的回调函数是以window的方法调用的，也就是我们常说的函数的方式调用的，所以我们的this是window，为了统一this，我们可以将attachEvent中的回调函数外面套一层函数，然后让浏览器间接调用，这样我们就可以通过我们的apply或call方法改变我们的this指向，统一我们的this指向了。
3. addEventListener方法有三个参数，但是我们的attachEvent只有两个参数
4. addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
5. 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理 程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依 赖于函数执行顺序，最好自己处理，不要指望浏览器

        function bind(obj, eventStr, callback) {
            if (obj.addEventListener) {
                // 这里的这个第三个参数表示是否需要在捕获阶段就触发事件
                obj.addEventListener(eventStr, callback, false)
            } else {
                //只能在冒泡阶段发生
                obj.attachEvent('on'+eventStr,function(){
                    // 这一步是为了解决this的不同指向问题，上面一个事件添加中的this是指向我们的obj，而我们这个是指向我们的window
                    //浏览器怎么调用我们官不着，但是我们可以通过外面套一层函数的方式，将其变成我们自己调用的，然后就可以修改其this指向了
                    callback.call(obj)
                })
            }
        }

2.getStyle（）函数。

兼容性：IE8及以下浏览器只有currentStyle属性，而IE8以上和其他的浏览器有getComputedStyle方法，所以我们也可以自己造一个函数，实现所有浏览器的兼容。

第一个参数：获取样式的对象

第二个参数：获取样式的名字

区别：

1. getComputedStyle方法是window的方法，所以我们可以直接使用。而我们的currentStyle属性是对象的，不是window的。
2. getComputedStyle方法支持伪元素，其第二个参数就是我们的伪元素，如果要使用，我们可以传一个伪元素进来，但是一般用不到伪元素，所以我们直接传一个null就可以了。而我们的currentStyle属性不支持伪元素的。

function getStyle（obj,name） {
    if(window.getComputedStyle){
        return window.getComputedStyle(obj,null)[name]
    }else{
        return obj.currentStyle[name]
    }
}

3.event事件对象的兼容性。

事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象传递进函数，在事件对象中封装了当前事件相关的一切信息。比如：鼠标坐标，键盘哪个键按下，鼠标滚轮的滚动方向等等。

兼容性：在IE中我们event是作为window的属性对象的，而不是直接通过浏览器调用回调函数时穿进去的事件对象，在其他的浏览器中，都是通过调用回调函数的时候直接将事件对象传递给函数的，所以在这里我们也统一一下兼容性的问题。

event=event||window.event

4.scrollTop与scrollLeftt的兼容性问题。

兼容性：chrome浏览器认为，滚动条是body的，而我们的火狐等浏览器认为，滚动条是html的。所以由此就出现了兼容性问题。

这里document.body为获取body对象的方法，而这里document.documentElement为获取我们html对象的方法，如果有不懂可以去查看我的javascript中DOM对象查的方法及属性。

const top=document.body.scrollTop||document.documentElement.scrollTop
const left=document.body.scrollLeft||document.documentElement.scrollleft