16.6 滚轮事件

1. onmousewheel 火狐不支持此事件

-->鼠标滚动时触发
   在火狐中需要使用DOMMouseScroll来绑定滚动事件，该事件需通过addEventListeber()函数来绑定

2. 事件对象.wheelDelta 火狐不支持

-->可以获取鼠标滚轮滚动的方向，向上滚是正值，向下滚是负值
   在火狐中用detail（往下滚是正值，往上滚是负值）

        <style>
        #box {
            height: 100px;
            width: 100px;
            background-color: pink;
        }
    </style>
        <div id="box"></div>
    <script>
        let box = document.getElementById('box');
        box.onmousewheel = function (event) {
            event = event || window.event;
            // wheelDelta可以获取鼠标滚动的方向，正值表示向上滚，负值表示向下滚
            // detail是给火狐准备的
            if (event.wheelDelta > 0 || event.detail < 0) {
                box.style.height = box.clientHeight - 100 + 'px';
            } else {
                box.style.height = box.clientHeight + 100 + 'px';
            }
            // 取消浏览器的默认滚动行为
            /* 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用
                return ，需要使用事件对象来取消默认行为，但是IE不支持,所以需要判断
            */
            event.preventDefault || event.preventDefault()
            return false
        }
        // 火狐不支持上面的事件，需用DOMMouseScroll并结合addEventListener使用
        bind(box, 'DOMMouseScroll', box.onmousewheel)
        function bind(obj, eventStr, callback) {
            if (obj.addEventListener) {
                // IE9及以上还有其它浏览器
                obj.addEventListener(eventStr, callback, false)
            } else {
                // this是谁由调用方式决定
                // callback.call(obj)
                // IE8及以下
                obj.attachEvent('on' + eventStr, function () {
                    callback.call(obj)
                })
            }
        }
    </script>