标签：
javascript鼠标中键滚动事件介绍:
在实际应用中，鼠标的一些事件非常常用，例如，onclick事件、onmouseover事件等，这里就不介绍了，具体可以参阅javascript的onclick事件和javascript的onmouseover事件一章节。 还有一种事件比较少用，那就是鼠标中键滚轮滚动事件，下面就通过代码实例简单介绍一下中键滚轮事件。
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.softwhy.com/" /> <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.srcElement属性可以参阅javascript的event.srcElement事件属性一章节。
2.target属性可以参阅javascript的event.target事件属性一章节。
3.preventDefault()函数可以参阅javascript的preventDefault()方法一章节。
4.addEventListener()函数可以参阅addEventListener()和attachEvent()函数的用法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10488
更多内容可以参阅:http://www.softwhy.com/javascript/
标签：
原文地址：http://www.cnblogs.com/zhadanren/p/5140872.html
