之前學習了onmouseover，onmousedown等滑鼠事件，今天來看看滑鼠的滾輪事件，瀏覽器相容一直是讓人比較噁心的事情，今天就讓我們將噁心進行到底，看看這個噁心的滑鼠滾輪事件！

滑鼠滾輪事件在IE和谷歌瀏覽器Chrome下是通過onmousewheel這個事件實現的，但是火狐FF下卻不識別onmousewheel，在FF下需要用DOMMouseScroll，並且必須用“事件監聽”方式新增事件才有效；

而大家都知道“事件監聽”方式繫結事件：

IE下是通過attachEvent實現事件監聽

而Chrome和FF下通過addEventListener  來實現事件監聽

這個場面是夠噁心了：

事件監聽                  滾輪事件

谷歌   addEventListener         onmousewheel

 IE      attachEvent                 onmousewheel

 FF     addEventListener         DOMMouseScroll

為了瀏覽器相容，我們自己封裝一個“繫結事件的函式”

function addEvent(obj,xEvent,fn) {
    if(obj.attachEvent){
      obj.attachEvent('on'+xEvent,fn);
    }else{
      obj.addEventListener(xEvent,fn,false);
    }
}
 

window.onload = function () {
  //接著利用我們自己封裝的函式給div繫結事件，
  var oDiv = document.getElementById('div1');
  addEvent(oDiv,'mousewheel',onMouseWheel);
  addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
  // 當滾輪事件發生時，執行onMouseWheel這個函式
  function onMouseWheel() {
    alert('haha');
  }
} 

在IE和Chrome下通過event.wheelDelta的返回值可以知道滾輪是向上滾的還是向下滾的

當返回值為正值的時候，說明是向上滾

當返回值是負值的時候，說明是向下滾

但是event.wheelDelta在火狐下並不起作用，在火狐下需要通過event.detail來知道滾輪是向上滾的還是向下滾，火狐下還有一點不同：

當返回值為正值的時候，說明是向下滾

當返回值是負值的時候，說明是向上滾

接下來，實現當滾輪向下滾動時div的高度增大，向上滾時div高度減小

1. 需要定義一個標誌位，標誌滾輪是向上滾還是向下滾

2. 需要做瀏覽器相容

3. 還要阻止瀏覽器預設行為

window.onload = function () {
        var oDiv = document.getElementById('div1');
 
        function onMouseWheel(ev) {/*當滑鼠滾輪事件發生時，執行一些操作*/
            var ev = ev || window.event;
            var down = true; // 定義一個標誌，當滾輪向下滾時，執行一些操作
                down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
            if(down){
                oDiv.style.height = oDiv.offsetHeight+10+'px';
            }else{
                oDiv.style.height = oDiv.offsetHeight-10+'px';
            }
            if(ev.preventDefault){/*FF 和 Chrome*/
                ev.preventDefault();// 阻止預設事件
            }
            return false;
        }
        addEvent(oDiv,'mousewheel',onMouseWheel);
        addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
     }
    function addEvent(obj,xEvent,fn) {
        if(obj.attachEvent){
            obj.attachEvent('on'+xEvent,fn);
        }else{
            obj.addEventListener(xEvent,fn,false);
        }
    }