js中的鼠标滚轮事件

##  事件对象 event
    1 event事件对象,表示用来获取事件的详细信息，比如得到鼠标的横坐标：事件对象.clientX(clientX是可视区坐标)
            window.onclick = function(ev){
                var oEvent = ev || event;//event为IE8和IE8以下浏览器浏览器事件对象可以直接使用；
                //以上代码可以判断是否传递了事件对象参数，如果传递了则使用传递的事件对象ev，否则使用window.event
                alert(oEvent.type);//click类型
            }
    2 事件对象的兼容写法
        a.IE8和IE8以下浏览器不能传递参数，只能使用window.event对象。
        b.谷歌浏览器既可以传递事件对象参数，也可以使用window.envent对象，十分全面。
        c.火狐浏览器只能使用传递的事件对象参数。
        因此针对不同浏览器，兼容性写法如下：
            事件.事件类型 = function(ev){//事件类型如鼠标点击事件
                var oEvent = ev || event;
            }

## 鼠标滚轮事件
    1 非火狐: mousewheel
        这里，event.wheelDelta < 0向下滚动
    2 火狐:DOMMouseScroll
        这里，event.detail > 0 为向下滚动，event.detail < 0 为向上滚动
    3.浏览器兼容性写法如下：
        document.onmousewheel = wheelHander;//非火狐
        document.addEventListener('DOMMouseScroll',wheelHander,false);//火狐

        function wheelHander(e){
            //事件的兼容性写法
            oEvent = e || window.event;
            if(oEvent.wheelDelta){//非火狐
                if(oEvent.wheelDelta > 0){//向上滚动

                }else{//向下滚动

                }
            }else if(oEvent.detail){
                if(oEvent.detail > 0){//向下滚动

                }else{//向上滚动

                }
            }
        }

    3 案例:使用滚轮改变图片的大小

        var img = document.getElementsByTagName('img')[0];

        //非火狐实现滚轮效果
        document.onmousewheel = wheelHander;//非火狐
        //火狐一家使用DOMMouseScroll实现滚轮效果
        document.addEventListener('DOMMouseScroll',wheelHander,false);

        function wheelHander(e){
            oEvent = e || window.event;
            if(oEvent.wheelDelta){//非火狐
                if(oEvent.wheelDelta > 0){//向上滚动
                    img.height++;
                }else{//向下滚动
                    img.height--;
                }
            }else if(oEvent.detail){
                if(oEvent.detail > 0){//向下滚动
                    img.height--;
                }else{//向上滚动
                    img.height++;
                }
            }
        }
        

---

获取更多前端知识，请关注下方二维码 ↓↓↓↓↓↓