鼠标滚轮的事件

这段时间的都是讲事件的，所以今天再来讲一个鼠标滚轮的事件。

要实现的功能是：

* 当鼠标滚轮向下滚动时，box1变长
* 当鼠标滚轮向上滚动时，box1变短

废话少说，代码奉上：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background: red;}</style><script type="text/javascript">window.onload = function(){box1 = document.getElementById("box1");//绑定滚轮事件/** onmousewheel鼠标滚轮滚动事件，会在滚轮滚动时触发，但是火狐不兼容* 在火狐中需要使用DOMMouseScroll来绑定滚轮事件* 注意该事件需要addEventLister（）来绑定* */box1.onmousewheel = function(event){alert("滚了")/** 当鼠标滚轮向下滚动时，box1变长* 当鼠标滚轮向上滚动时，box1变短* 判断鼠标滚轮滚动的方向* event.wheelDelta 可以获取鼠标滚轮滚动的方向* 向上滚120，向下滚-120* wheelDelta火狐不支持，所以使用* event.detail来获取滚动的方向* 向上滚-3，向下滚3*/event = event || window.event;if(event.wheelDelta>0 || event.detail<0){box1.style.height = event.clientHeight - 10 +"px"}else{box1.style.height = event.clientHeight + 10 +"px"}/** 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，* 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为。使用return false* 但是addEventListener（）方法绑定响应函数，取消默认行为不能使用return false，需要使用event来取消默认行为* event.preventDefault();但是IE8不支持，不能直接调用。*/if(event.preventDefault){event.preventDefault()}return false;}//为火狐绑定滚轮事件
                bind(box1,'DOMMouseScroll',box1.onmousewheel)function bind(obj,eventstr,callback){if (obj.addEventListener){obj.addEventListener(eventstr,callback,false)}else{obj.attachEvent('on'+eventstr,function(){callback.call(obj);})}}}</script></head><body><div id="box1"></div></body>
</html>