JavaScript事件类型：滚轮事件

滚轮事件

当用户通过鼠标滚轮在垂直方向上滚动页面时（向上或向下），就会触发mousewheel事件。这个事件可以在任何元素上触发，但最终都会冒泡到document或window对象上面。

事件对象event的属性：wheelDelta属性

wheelDelta：当用户向上滚动鼠标滚轮时，wheelDelta属性的值是120的倍数；当用户向下滚动鼠标滚轮时，wheelDelta属性的值是-120的倍数。

测试代码：

    0


document.addEventListener('mousewheel',function(event){
    document.getElementsByTagName('span')[0].firstChild.nodevalue=event.wheelDelta;
})

*多数情况下，只要知道鼠标滚动的方向就可以了，而这通过检测wheelDelta的正负号就可以确定。但是在Opera9.5之前的版本中，wheelDelta值得正负号是颠倒的。在文章下面的跨浏览器方案中会有解决的策略。

Firefox浏览器支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚轮滚动时触发。而有关滚轮事件的信息则保存在detail属性中。当用户向上滚动鼠标滚轮时，detail属性的值是-3的倍数；当用户向下滚动鼠标滚轮时，detail属性的值是3的倍数。

测试代码：

    0


document.addEventListener('DOMMouseScroll',function(event){
    document.getElementsByTagName('span')[0].firstChild.nodevalue=event.detail;
})

一个跨浏览器环境下的解决方案

代码如下：

//判断浏览器类型
var client = function () {
 var engine = {
     ie: 0,
     gecko: 0,
     webkit: 0,
     khtml: 0,
     opera: 0,
     ver: null
 };
 return {
     engine: engine
 };
    }();

var EventUtil = {
    getEvent: function (event) {
 return event ? event : window.event;
    },
    addHandler: function (element, type, handler) {
 if (element.addEventListener) {
     element.addEventListener(type, handler, false);
 } else if (element.attachEvent) {
     element.attachEvent("on" + type, handler);
 } else {
     element["on" + type] = handler;
 }
    },
    getWheelDelta: function (event) {
 var driect=null;
 if (event.wheelDelta) {
     driect=(client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
 } else {
     driect=-event.detail * 40;
 }
 return (driect>0?1:-1);
    }
};

//调用方法getWheelDelta()
(function(){
    function handleMouseWheel(event) {
 event = EventUtil.getEvent(event);
 var delta = EventUtil.getWheelDelta(event);
 alert(delta);
    }
    EventUtil.addHandler(document, "mousewheel", handleMouseWheel);
    EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);
})()
//输出：向上滚动鼠标滚轮时弹出‘1’，向下滚动鼠标滚轮时弹出‘-1’

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。