JavaScript滚轮事件兼容性写法

研究滚轮事件是因为在做一个翻版的fullpage.js，需要通过监听滚轮事件进行翻页。在实现过程中遇到了一些兼容性问题处理。所以顺便封装了个方法wheel(upFn, downFn)，方便日后调用。 但W3C并没有对鼠标滚轮事件进行规范，各浏览器厂商封装了不同的实现方法，事件属性也不一样，号称最标准的FireFox，用了一个私有实现DOMMouseScroll。不过，其他浏览器都是用onmousewheel实现，所以做兼容处理的难度也不大。

浏览器	实现方法	事件属性	向上滚动	向下滚动
FireFox	DOMMouseScroll	detail	-3的倍数	3的倍数
非FireFox	onmousewheel	wheelDelta	120的倍数	-120的倍数

在FireFox下，DOMMouseScroll必须通过addEventListener来绑定，如： element.addEventListener("DOMMouseScroll",func,false) ； 在非FireFox下，就没有限制了，除了addEventListener方法，还可用下边的代码： element.onmousewheel=function(){}； 封装代码如下：

// 滚轮响应事件
// 参数：type有两个属性值，分别为"up"（滚轮向上）和"down"（滚轮向下）
function wheel(upFn, downFn) {
    // IE6
    window.onmousewheel = getWheelDalta;
    // Firefox
    if(window.addEventListener) {
        window.addEventListener("DOMMouseScroll", getWheelDalta, false);
    }
    // 获得鼠标滚轮事件
    function getWheelDalta(event) {
        var event = event || window.event;
        var delta = 0;
        // delta的返回值为正时，表示向前滚动；delta的返回值为负时，表示向后滚动；
        if (event.wheelDelta) {
            // IE中，鼠标滚轮信息存放在wheelDelta属性中；向前滚动时，wheelDelta的值是120的倍数；向后滚动时，wheelDelta的值是-120的倍数；
            delta = event.wheelDelta/120; 
            if (window.opera) delta = -delta;
        } else if (event.detail) {
            // Firefox的鼠标滚轮信息存放在detail属性中；向前滚动，detail的值是-3的倍数；向后滚动，detail的值是3的倍数；
            delta = -event.detail/3;
        }
        // 执行滚轮事件函数
        if(delta > 0) {
            upFn();
        }else {
            downFn();
        }

        // 阻止默认行为，防止当页面本身就存在滚动条时出现的异常
        prevent(event);
        function prevent(evt){
            if(evt.preventDefault){
                evt.preventDefault();
            }else{
                evt.returnValue = false;
            }
        }
    }   
}

测试调用：

function wheelUp() {
    alert("wheelUp");
}
function wheelDown() {
    alert("wheelDown");
}
wheel(wheelUp, wheelDown);

具体见下示例：See the Pen <a href="http://codepen.io/dengzhirong/pen/VvmaaJ/" _href="http://codepen.io/dengzhirong/pen/VvmaaJ/">VvmaaJ</a> by dengzhirong (<a href="http://codepen.io/dengzhirong" _href="http://codepen.io/dengzhirong">@dengzhirong</a>) on <a href="http://codepen.io" _href="http://codepen.io">CodePen</a>.