JavaScript鼠标中键滚动事件
JavaScript鼠标中键滚动事件属于前端实例代码，有关更多实例代码大家可以查看。
在实际应用中，鼠标的一些事件非常常用，例如，onclick事件、onmouseover事件等，这里就不介绍了，具体可以参阅javascript click事件和javascript mouseover事件一章节。 还有一种事件比较少用，那就是鼠标中键滚轮滚动事件，下面就通过代码实例简单介绍一下中键滚轮事件。
IE浏览器和谷歌浏览器支持mousewheel事件，也就是鼠标中键滚动事件，但是遗憾的是火狐浏览器并不支持此事件，而是支持DOMMouseScroll事件，下面就这两个做一下简单的分析对别:
一.mousewheel事件:
event.wheelDelta返回值是120的倍数，如果属性值为正数则是向上滚动，如果是负数则是向下滚动。
滚动幅度的大小等于event.wheelDelta/120。
二.DOMMouseScroll事件:
event.detail返回值都是3的倍数，和event.wheelDelta相反，如果属性值为负数，则是向上滚动，如果是正数则是向下滚动。
特别注意:
DOMMouseScroll不支持前面加"on"事件注册方式，例如obj.onclick=funcion(){}。
下面对上面做一下兼容性处理，以达到在任何浏览器中都可以顺利运行。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#thediv{
width:100px;
height:100px;
background-color:red
}
</style>
<script type="text/javascript">
var addEvent=(function(){
var _eventCompat=function(event){
var type=event.type;
if(type=='DOMMouseScroll'||type=='mousewheel'){
event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3;
}
if(event.srcElement&&!event.target){
event.target=event.srcElement;
}
if(!event.preventDefault&&event.returnValue!==undefined){
event.preventDefault=function(){
event.returnValue=false;
};
}
return event;
};
if(window.addEventListener){
return function(el, type, fn, capture){
if(type==="mousewheel"&&document.mozHidden!==undefined){
type="DOMMouseScroll";
}
el.addEventListener(type,function(event){
fn.call(this, _eventCompat(event));
},capture||false);
}
}
else if(window.attachEvent){
return function(el, type, fn, capture){
el.attachEvent("on" + type, function(event){
event = event || window.event;
fn.call(el, _eventCompat(event));
});
}
}
return function(){};
})();
window.onload=function(){
var height=100;
var width=100;
var thediv=document.getElementById("thediv");
function size(event){
width=width+event.delta;
height=height+event.delta;
thediv.style.width=width+"px";
thediv.style.height=height+"px";
}
addEvent(thediv,"mousewheel",size,false);
}
</script>
</head>
<body>
<div id="thediv"></div>
</body>
</html>
当鼠标放在div中时候，滚动鼠标中键能够缩放div的大小，下面介绍一下实现过程:
一.实现原理:
代码看上去稍显复杂，其实特别的简单，就是根据在不同浏览器中，相关事件的特点，进行了一些兼容性处理，这是必然的操作，这里就不多介绍了，大家直接看代码注释可以了解相关细节。
二.代码注释:
1.var addEvent=(function(){})()，声明一个变量，它的值就是匿名函数的返回值，这个返回值就是一个函数对象。
2.var _eventCompat=function(event){})()，声明一个变量，它的值是一个匿名函数，此匿名函数能够封装一个事件对象，对时间对象的属性做一些兼容性处理，此函数的参数就是事件对象。
3.var type=event.type，将事件类型类型赋值给变量type。
4.if(type=='DOMMouseScroll'||type=='mousewheel')，如果事件类型是'DOMMouseScroll'或者'mousewheel'。
5.event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3，delta是一个事件对象的自定义属性，如果支持event.wheelDelta属性（谷歌和IE浏览器）则使用event.wheelDelta/120，这会得到滚动的幅度，event.wheelDelta的返回值都是120的倍数，如果在火狐浏览器下，则使用(event.detail||0)/3，event.detail的返回值是3的倍数。
6.if(event.srcElement&&!event.target) ，如果事件对象支持srcElement属性且不支持target属性，这说明是IE8和IE8以下浏览器。
7.event.target=event.srcElement，将target属性值修改为event.srcElement。
8.if(window.addEventListener) ，如果支持addEventListener函数，也就是谷歌、火狐或者IE8以上浏览器。
9.return function(el, type, fn, capture){}，返回一个函数对象，此函数具有四个参数，第一个参数是要注册事件处理函数的对象，第二个是事件类型，第三个是事件处理函数，第四个是一个布尔值，用来说明是捕获类型还是冒泡类型。
10.if(type==="mousewheel"&&document.mozHidden!==undefined){type="DOMMouseScroll"} 如果是火狐浏览器，则将type值设置为DOMMouseScroll。document.mozHidden在火狐浏览器中是个布尔值，在谷歌和IE浏览器中返回值是undefined。
11.el.addEventListener(type,function(ev){}，capture||false）注册事件处理函数。
12.fn.call(this, _eventCompat(ev));，将函数fn的调用对象设置为el，参数为一个封装好的事件对象，参数ev是原始的事件对象。
相关阅读:
（1）.target属性参阅javascript event.target一章节。
（2）.preventDefault参阅javascript preventDefault()一章节。
（3）.addEventListener参阅addEventListener()和attachEvent()函数的用法一章节。
JavaScript鼠标中键滚动事件，这样的场景在实际项目中还是用的比较多的，关于JavaScript鼠标中键滚动事件就介绍到这了。