滚轮事件

对于滚轮事件，有类似的滚动事件scroll，但是滚动事件不兼容IE8-浏览器。

滚轮事件与滚动事件不同，滚动事件必须有滚动条，才可以实现。而滚动事件是滚动鼠标滚轮触发的事件，与是否有滚动条无关

IE6首先实现了鼠标滚轮mousewheel事件，当用户通过滚动与页面交互、在垂直方向上滚动页面时，会触发mousewheel事件。最终会冒泡到document(IE8-)或window(标准)

[注意]这个事件可以在任何元素上触发

滚轮事件中有一个wheelDelta属性，当用户向前滚动鼠标滚轮时，wheelDelta是120的倍数；当用户向后滚动鼠标滚轮时，wheelDelta是-120的倍数

<div id="box" style="height:100px;width:200px;background:pink;"></div>
<script>
box.onmousewheel=function(e){
    e = e || event;
    box.innerHTML = e.wheelDelta;
    if(e.wheelDelta >0){
        box.style.backgroundColor = 'lightblue';
    }else{
        box.style.backgroundColor = 'lightgreen';
    }
}
</script>

firefox浏览器不支持mousewheel事件，它支持DOMMouseScroll事件，而有关鼠标滚轮的信息则保存在detail属性中，当向前滚动鼠标滚轮时，这个属性的值是-3的倍数，当向后滚动鼠标滚轮时，这个属性的值是3的倍数

[注意]该事件仅支持DOM2级事件处理程序的写法

<div id="box" style="height:100px;width:200px;background:pink;"></div>
<script>
box.addEventListener('DOMMouseScroll',function(e){
    e = e || event;
    console.log(e)
    box.innerHTML = e.detail;
    if(e.detail >0){
        box.style.backgroundColor = 'lightblue';
    }else{
        box.style.backgroundColor = 'lightgreen';
    }
})
</script>

兼容

var handler = function(e){
    var getWheelDelta;
    e = e || event;
    if(e.wheelDelta){
        getWheelDelta = e.wheelDelta;
    }else{
        getWheelDelta = -e.detail * 40;
    }
}

<body style="height:2000px">
<p style="position: fixed">滚动滚轮将显示滚动值</p>
<div id="test" style="position: fixed"></div>
<script>
var wheel = function(e){
    e = e || event;
    if(e.wheelDelta){
        test.innerHTML = e.wheelDelta;
    }else{
        test.innerHTML = -e.detail * 40;
    }
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);    
</script>    
</body>

移动设备

由于移动设备没有鼠标，所以与电脑端有一些不同之处。移动设备尽量使用移动端事件，而不要使用鼠标事件

【1】不支持dblclick双击事件。在移动设备中双击浏览器窗口会放大画面

【2】单击元素会触发mousemove事件

【3】两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel和scroll事件