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级添加事件的方法，还要传入事件对象，这样更合理。