js中的滑鼠滾輪事件

標籤：滾輪   function   使用   type   detail   eve   滑鼠滾輪事件   事件對象   use   

##  事件對象 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.Google瀏覽器既可以傳遞事件對象參數，也可以使用window.envent對象，十分全面。        c.Firefox瀏覽器只能使用傳遞的事件對象參數。        因此針對不同瀏覽器，相容性寫法如下：            事件.事件類型 = function(ev){//事件類型如滑鼠點擊事件                var oEvent = ev || event;            }            ## 滑鼠滾輪事件    1 非Firefox: mousewheel        這裡，event.wheelDelta < 0向下滾動    2 Firefox:DOMMouseScroll        這裡，event.detail > 0 為向下滾動，event.detail < 0 為向上滾動    3.瀏覽器安全色性寫法如下：        document.onmousewheel = wheelHander;//非Firefox        document.addEventListener(‘DOMMouseScroll‘,wheelHander,false);//Firefox                function wheelHander(e){            //事件的相容性寫法             oEvent = e || window.event;            if(oEvent.wheelDelta){//非Firefox                if(oEvent.wheelDelta > 0){//向上滾動                                    }else{//向下滾動                                    }            }else if(oEvent.detail){                if(oEvent.detail > 0){//向下滾動                                    }else{//向上滾動                                    }            }        }                3 案例:使用滾輪改變圖片的大小                var img = document.getElementsByTagName(‘img‘)[0];                //非Firefox實現滾輪效果        document.onmousewheel = wheelHander;//非Firefox        //Firefox一家使用DOMMouseScroll實現滾輪效果        document.addEventListener(‘DOMMouseScroll‘,wheelHander,false);                function wheelHander(e){            oEvent = e || window.event;            if(oEvent.wheelDelta){//非Firefox                if(oEvent.wheelDelta > 0){//向上滾動                    img.height++;                }else{//向下滾動                    img.height--;                }            }else if(oEvent.detail){                if(oEvent.detail > 0){//向下滾動                    img.height--;                }else{//向上滾動                    img.height++;                }            }        }        

 

js中的滑鼠滾輪事件