js基础_75、滚轮的事件

onmousewheel

鼠标滚轮滚动的事件，会在滚轮滚动时触发，但是火狐不支持该属性。
在火狐中需要使用DOMMouseScroll来绑定滚动事件，注意该事件需要通过addEventListener()函数来绑定

wheelDelta

该属性可以获取鼠标滚动的方向，向上滚值为120，向下滚值为-120，wheelDelta这个值我们不看大小，只看正负。
比如：（event.wheelDelta）

wheelDelta这个属性火狐中不支持，在火狐中使用detail属性来获取滚动的方向，向上滚-3，向下滚3。（event.detail）

当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，如果不希望发生浏览器的默认行为，则可以取消默认行为，方法，在给元素绑定滚动时，最后return false;即可

使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false;
需要使用event来取消默认行为event.preventDefault()。
但是IE8不支持event.preventDefault();，如果直接调用会报错。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box1{
                width: 100px;
                height: 100px;
                background-color: aqua;
            }
        </style>
        <script>
            window.onload=function(){
                //当鼠标滚轮在box里向下滚动时，box变长，向上滚时变短。
                //获取div
                var box=document.getElementById("box1");
                //为box1绑定一个鼠标滚轮滚动的事件
                box.onmousewheel=function(event){
                    event=event||window.event;
                    event.preventDefault()
                    if(event.wheelDelta>0||event.detail<0){
                        box.style.height=box.clientHeight+10+"px";
                        //box.style.width=box.clientWidth+10+"px";
                    }else{
                        box.style.height=box.clientHeight-10+"px";;
                    }
                    //当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，
                    //如果不希望发生浏览器的默认行为，则可以取消默认行为，方法，在给元素绑定滚动时，最后return false;即可
                    return false;
                };
                //为火狐浏览器绑定鼠标滚轮事件，如果使用其它浏览器便不用写此行代码
                bind(box,"DOMMouseScroll",box.onmousewheel);
            }
            var bind=function(obj,evenstr,callback){
                    if(obj.addEventListener){
                        //大部分浏览器兼容的方法
                        obj.addEventListener(evenstr,callback,false);
                    }else{
                        //IE8兼容的方法
                        obj.attachEvent("on"+evenstr,function(){
                            //改变attachEvent中的this指向，这里我们自定了了一个函数让attachEvent去执行了，
                            //而attachEvent没有去执行它本来该执行的函数。
                            callback.call(obj);
                        });
                    };
                };
        </script>
    </head>
    <body id="body" style="height: 2000px;">
        <div id="box1"></div>
    </body>
</html>