浅谈-滚轮事件

那先给大家上一张图吧！！先了解了解

　　IE6+ 、Chrome 、Safari、Opera 9.5+

　　事件： mousewheel 滚轮信息保存在：wheelDelta 也就是图中的数值部分，从其值的正负可以得出出滚轮的方向

　　　　支持事件冒泡，这个事件在任何元素都会触发，最终会冒泡到document（IE8）或 window（IE9 Opera Chrome Safari）

　　　　而 event 对象保存了 mousewheel事件的基本信息。

　　基于Opera9.5 以及之下的表现略不同，如下图

　基于Firefox 时，也支持滚轮事件，只是事件对象不一样罢了，还有一个不同点就是滚轮信息保存在了 detal 属性中

　　　　事件：DOMMouseScroll 有关鼠标滚轮信息则保存在: detail

相信聪明的大家应该也对滚轮也有大概的印象了吧！！有这些基本理论了那我们还缺少实战对吧！那下面从实例中来感受感受吧

实例一 :

 var EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                element["on" + type] = handler;
            }
        },
        removeHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler);
            } else {
                element["on" + type] = null;
            }
        },
        getEvent: function (event) {
            return event ? event : window.event;
        },
        getTarget: function (event) {
            return event.target || event.srcElement;
        },
        preventDefault: function (event) {
            if (event.preventDefault) {
                event.preventDefault;
            } else {
                event.returnValue = false;
            }
        },
        stopPropagation: function (event) {
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
        },
        getRelatedTarget:function(event){
            if(event.relatedTarget){
                return event.relatedTarget;
            }else if(event.toElement){
                return event.toElement;
            }else if(event.fromElement){
                return event.fromElement;
            }else{
                return null;
            }
        },
        getButton:function(event){
            if(document.implementation.hasFeature("MouseEvents","2.0")){
                return event.button;
            }else{
                switch (event.button){
                    case 0:
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                        return 0;
                    case 2:
                    case 6:
                        return 2;
                    case 4:
                        return 1;
                }
            }
        }
    };

EventUtil.addHandler(document,"mousewheel",function(){
   console.log("g");
});
var div = document.getElementById("left");
EventUtil.addHandler(div,"mousewheel",function(event){
   event = EventUtil.getEvent(event);
   console.log(event.wheelDelta);
});

在 IE 、Chrome 、Safari、Opera 9.5+ 中表现如下：

　鼠标向上滚动时： + 120 、g

　鼠标向下滚动时： - 120 、 g 　

实例二：

    EventUtil.addHandler(document,"DOMMouseScroll",function(){
        console.log("g");
    })
    var div = document.getElementById("left");
    EventUtil.addHandler(div,"DOMMouseScroll",function(event){
        event = EventUtil.getEvent(event);
        console.log(event.detail);
    });

在 Firefox 中，表现如下

鼠标向上滚动时： - 3 、 g

　鼠标向下滚动时： + 3 、 g 　

从上面两个实例可以看出

若要给出跨浏览器环境下的解决方案，可以使用下面的方式

var EventUtil = {
  getWheelDelta:function(event){
            if(event.wheelDelta){
                return event.wheelDelta;
            }else{
                return -event.detail * 40;
            }
    }  


}

从上面主要添加如果存在 wheelDelta 则表示Firefox 之外的浏览器，如果是则对其进行相应处理，达到与其他浏览器一样的效果

function handleMouseWheel(event) {
        event = EventUtil.getEvent(event);
        console.log(EventUtil.getWheelDelta(event)); 
} 
EventUtil.addHandler(document,"DOMMouseScroll",handleMouseWheel) 
EventUtil.addHandler(document,"mousewheel",handleMouseWheel)