这段时间的都是讲事件的，所以今天再来讲一个鼠标滚轮的事件。
要实现的功能是：
* 当鼠标滚轮向下滚动时，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>