JS事件-鼠标滚轮事件

之前学习了onmouseover，onmousedown等鼠标事件，今天来看看鼠标的滚轮事件，浏览器兼容一直是让人比较恶心的事情，今天就让我们将恶心进行到底，看看这个恶心的鼠标滚轮事件！

鼠标滚轮事件在IE和谷歌浏览器Chrome下是通过onmousewheel这个事件实现的，但是火狐FF下却不识别onmousewheel，在FF下需要用DOMMouseScroll，并且必须用“事件监听”方式添加事件才有效；

而大家都知道“事件监听”方式绑定事件：

IE下是通过attachEvent实现事件监听

而Chrome和FF下通过addEventListener  来实现事件监听

这个场面是够恶心了：

事件监听                  滚轮事件

谷歌   addEventListener         onmousewheel

IE    
  attachEvent                 onmousewheel

FF     addEventListener         DOMMouseScroll

为了浏览器兼容，我们自己封装一个“绑定事件的函数”

function addEvent(obj,xEvent,fn) {
    if(obj.attachEvent){
      obj.attachEvent('on'+xEvent,fn);
    }else{
      obj.addEventListener(xEvent,fn,false);
    }
}

window.onload = function () {
  //接着利用我们自己封装的函数给div绑定事件，
  var oDiv = document.getElementById('div1');
  addEvent(oDiv,'mousewheel',onMouseWheel);
  addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
  // 当滚轮事件发生时，执行onMouseWheel这个函数
  function onMouseWheel() {
    alert('haha');
  }
} 

有时候当鼠标滚轮滚动的时候我们需要知道滚轮是向上滚的还是向下滚的。

在IE和Chrome下通过event.wheelDelta的返回值可以知道滚轮是向上滚的还是向下滚的

当返回值为正值的时候，说明是向上滚

当返回值是负值的时候，说明是向下滚

但是event.wheelDelta在火狐下并不起作用，在火狐下需要通过event.detail来知道滚轮是向上滚的还是向下滚，火狐下还有一点不同：

当返回值为正值的时候，说明是向下滚

当返回值是负值的时候，说明是向上滚

接下来，实现当滚轮向下滚动时div的高度增大，向上滚时div高度减小

1. 需要定义一个标志位，标志滚轮是向上滚还是向下滚

2. 需要做浏览器兼容

3. 还要阻止浏览器默认行为

window.onload = function () {
        var oDiv = document.getElementById('div1');

        function onMouseWheel(ev) {/*当鼠标滚轮事件发生时，执行一些操作*/
            var ev = ev || window.event;
            var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
                down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
            if(down){
                oDiv.style.height = oDiv.offsetHeight+10+'px';
            }else{
                oDiv.style.height = oDiv.offsetHeight-10+'px';
            }
            if(ev.preventDefault){/*FF 和 Chrome*/
                ev.preventDefault();// 阻止默认事件
            }
            return false;
        }
        addEvent(oDiv,'mousewheel',onMouseWheel);
        addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
     }
    function addEvent(obj,xEvent,fn) {
        if(obj.attachEvent){
            obj.attachEvent('on'+xEvent,fn);
        }else{
            obj.addEventListener(xEvent,fn,false);
        }
    }