mousewheel事件的兼容方法

在垂直方向上滾動頁面時，會觸發mousewheel事件，這個事件會在任何元素上觸發，最終都會冒泡到document（IE8）或window（IE9+及其他主流現代瀏覽器）對象。

在給元素指定mousewheel事件時，FireFox不支持使用onmousewheel，而是支持一個名為DOMMouseScroll的事件。DOMMouseScroll與onmousewheel的區別是，前者只能通過DOM2級事件處理程序的方法，即addEventListener()方法添加事件處理程序，而后者可以使用DOM0級（element.onmousewheel=function() {}）和DOM2級事件處理程序的方法添加事件處理程序。

為了在不同瀏覽器中能使用一樣的代碼，我想了一個給元素添加mousewheel事件的通用方法。下面是代碼：

function addMouseWheelEvent(element,func) {
 
   if (typeof element.onmousewheel == "object") {
      element.onmousewheel = function() {
        func();
     };
   }

   if (typeof element.onmousewheel == "undefined") {
      element.addEventListener("DOMMouseScroll",func,false);
   } 
 }

方法的名稱是addMouseWheelEvent，該方法接收兩個參數：element表示要添加mousewheel事件的元素節點，func表示作為事件處理程序的函數。使用方法是直接調用該函數並出入適當的參數即可：addMouseWheelEvent(element,func);

原理是：在支持onmousewheel的瀏覽器中element.onmousewheel的typeof值為object，在不支持onmousewheel的瀏覽器中element.onmousewheel的typeof值為undefined。可以根據typeof值的不同對瀏覽器進行能力檢測，從而應用不同的添加事件處理程序的方法。

經過測試該方法在chrome、IE11和FireFox中能正常使用。

補充：

在給元素指定mousewheel事件時，對應的event對象會有一個wheelDelta屬性（規范中的屬性），當用戶向前滾動滾輪時，其值是120的整數倍，當用戶向后滾動滾輪時，其值是-120的整數倍。當然在FireFox中這個屬性不叫wheelDelta，而是叫detail，當用戶向前滾動滾輪時，detail的值是-3的整數倍，當用戶向后滾動滾輪時，detail的值是3的整數倍，正負號與wheelDelta的值是相反的。

 

2017-5-12更新：現在看當初自己寫的這個方法，實在是不怎么樣。根據判斷條件都用DOM2級添加事件的方法，還要傳入事件對象，這樣更合理。