滚轮滚动事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				 100px;
				height: 100px;
				background-color: skyblue;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				// 当鼠标滚轮向下滚动时，box1变长
				// 当滚轮向上滚动时，box1变短
				
				var box1 = document.getElementById("box1");
				
				// 为box1绑定一个鼠标滚轮滚动事件
				/*
				onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发
				但是火狐不支持该属性
				
				
				在火狐中需要使用DOMMouseScroll 来绑定滚动时间
				  该事件需要通过addEventListener()函数调用
				*/
				box1.onmousewheel=function(event){
					event = event || window.event;
					/*
					判断鼠标滚轮滚动的方向
					event.wheelDelta 可以获取鼠标滚轮滚动的方向
					向上滚  120  向下滚 -120
					wheelDelta这个值不看大小，只看正负
					*/
				   // alert(event.wheelDelta);
				   
				   // wheelDelta这个属性火狐中不支持
				   // 在火狐中使用event.datail来获取滚动
				   // 向上滚-3 向下滚3
				   
				   // alert(event.detail);
				   
				   
				   // 判断鼠标滚轮滚动的方向
				   if(event.wheelDelta > 0 || event.detail <0){
					   // alert("向上")
					   box1.style.height=box1.clientHeight-10+"px";
				   }else{
					    box1.style.height=box1.clientHeight+10+"px";
				   }
				   
				   /*
				   当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
				   这是浏览起的默认行为  如果不希望发生  可以取消
				   */
				  return false;
				  
				  // 使用addEventListener（）方法绑定响应函数，取消默认行为时不能使用return return false;
				  // 需要使用event来取笑默认行为 event.preventDefault();
				  // IE8不支持event.preventDefault();
				  event.preventDefault&&event.preventDefault();
				}
				
				bind(box1,"DOMMouseScroll",function(){
					alert(1);
				})
			}
			function bind(obj,eventStr,callback){
				if(obj.addEventListener){
					// 大部分浏览器兼容的方式
					obj.addEventListener(eventStr,callback,false);
				}else{
					/*
					this是谁由调用方式决定的
					callbank.call(obj)
					*/
					// IE8及以下
					obj.attachEvent("on"+eventStr,function(){
						// 在匿名函数中调用回掉函数
						callback.call(obj);
					});
				}
			}
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>