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++;
                }
            }
        }
        

 

---

 

獲取更多前端知識，請關注下方二維碼 ↓↓↓↓↓↓