滚轮事件 | 笑笑の博客

onmousewheel在鼠标滚动的时候触发，火狐不支持，火狐用DOMMouseScroll来绑定，且该事件通过addEventListener()函数来绑定
判断滚轮方向：event.wheelDelta，火狐不支持，向上为正
判断滚轮方向：event.detail，火狐支持，向上为负数

事件绑定
addEventListener()中的this是绑定事件的对象
attachEvent()中的this是window 定义一个函数，用来为指定元素绑定响应函数

function bind(obj,eventStr,callback){
              //obj要绑定事件的对象，eventStr事件的字符串（不要on),callback回调函数  
              if(obj.addEventListener){
                  //大部分浏览器兼容的方式  
                  obj.addEventListener(eventStr,callback);
              }else{
                  //this是谁由调用方式决定  
                  //IE8及以下
                  obj.attachEvent("on"+evenStr,function(){
                      //在匿名函数中调用回调函数
                      callback.call(obj);
                  })

鼠标滚轮往上，box1变短;鼠标滚轮往下，box1变短
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            height: 100px;
            width: 100px;
            background-color: green;
            position: absolute;
        }
    </style>
    <script>
        /*鼠标滚轮往上，box1变短
        鼠标滚轮往下，box1变短
        */
        window.onload = function(){
            //获取box1的对象
            var box = document.getElementById("box1");
            //鼠标滚动事件,onmousewheel火狐不支持
            function fun(event){
                event = event||window.event;
                //判断鼠标向上滚还是向下
                //alert(event.wheelDelta); 火狐不支持，向上为正
                //alert(event.detail);火狐支持，其它不支持，向上为负数
                if(event.wheelDelta > 0 || event.detail <0){
                    box.style.height = box.clientHeight + 10 + "px";
                }else{
                    box.style.height = box.clientHeight - 10 + "px";
                }

                /*当滚轮滚动的时候，如果浏览器有滚动条，滚动条会随之动
                这是浏览器的默认行为  
                */
                return false;
                //火狐的事件绑定在addEventListener(),所以不能通过reurn false取消  
                event.preventDefault&&event.preventDefault();//此IE8不支持，需要判断
            };
            box.onmousewheel=fun;
            //火狐
            bind(box,"DOMMouseScroll",fun);
            //兼容方式
            function bind(obj,eventStr,callback){
                //obj要绑定事件的对象，eventStr事件的字符串（不要on),callback回调函数  
                if(obj.addEventListener){
                    //大部分浏览器兼容的方式  
                    obj.addEventListener(eventStr,callback);
                }else{
                    //this是谁由调用方式决定  
                    //IE8及以下
                    obj.attachEvent("on"+evenStr,function(){
                        //在匿名函数中调用回调函数
                        callback.call(obj);
                    })
                }
            }
        }
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>