js中的鼠标滚轮事件

## ?事件对象 event ???1 event事件对象,表示用来获取事件的详细信息，比如得到鼠标的横坐标：事件对象.clientX(clientX是可视区坐标) ???????????window.onclick = function(ev){ ???????????????var oEvent = ev || event;//event为IE8和IE8以下浏览器浏览器事件对象可以直接使用； ???????????????//以上代码可以判断是否传递了事件对象参数，如果传递了则使用传递的事件对象ev，否则使用window.event ???????????????alert(oEvent.type);//click类型 ???????????} ???2 事件对象的兼容写法 ???????a.IE8和IE8以下浏览器不能传递参数，只能使用window.event对象。 ???????b.谷歌浏览器既可以传递事件对象参数，也可以使用window.envent对象，十分全面。 ???????c.火狐浏览器只能使用传递的事件对象参数。 ???????因此针对不同浏览器，兼容性写法如下： ???????????事件.事件类型 = function(ev){//事件类型如鼠标点击事件 ???????????????var oEvent = ev || event; ???????????} ???????????## 鼠标滚轮事件 ???1 非火狐: mousewheel ???????这里，event.wheelDelta < 0向下滚动 ???2 火狐:DOMMouseScroll ???????这里，event.detail > 0 为向下滚动，event.detail < 0 为向上滚动 ???3.浏览器兼容性写法如下： ???????document.onmousewheel = wheelHander;//非火狐 ???????document.addEventListener(‘DOMMouseScroll‘,wheelHander,false);//火狐 ???????????????function wheelHander(e){ ???????????//事件的兼容性写法 ????????????oEvent = e || window.event; ???????????if(oEvent.wheelDelta){//非火狐 ???????????????if(oEvent.wheelDelta > 0){//向上滚动 ???????????????????????????????????}else{//向下滚动 ???????????????????????????????????} ???????????}else if(oEvent.detail){ ???????????????if(oEvent.detail > 0){//向下滚动 ???????????????????????????????????}else{//向上滚动 ???????????????????????????????????} ???????????} ???????} ???????????????3 案例:使用滚轮改变图片的大小 ???????????????var img = document.getElementsByTagName(‘img‘)[0]; ???????????????//非火狐实现滚轮效果 ???????document.onmousewheel = wheelHander;//非火狐 ???????//火狐一家使用DOMMouseScroll实现滚轮效果 ???????document.addEventListener(‘DOMMouseScroll‘,wheelHander,false); ???????????????function wheelHander(e){ ???????????oEvent = e || window.event; ???????????if(oEvent.wheelDelta){//非火狐 ???????????????if(oEvent.wheelDelta > 0){//向上滚动 ???????????????????img.height++; ???????????????}else{//向下滚动 ???????????????????img.height--; ???????????????} ???????????}else if(oEvent.detail){ ???????????????if(oEvent.detail > 0){//向下滚动 ???????????????????img.height--; ???????????????}else{//向上滚动 ???????????????????img.height++; ???????????????} ???????????} ???????} ???????