這段時間的都是講事件的，是以今天再來講一個滑鼠滾輪的事件。
要實作的功能是：
* 當滑鼠滾輪向下滾動時，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>