鼠标滚轮事件

<script>
     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;
                }
            },
            getEvent: function(event){//获得事件对象
                return event || window.event;
            },
            getTarget: function(event){//获得事件元素
                return event.target || event.srcElement;
            },
            preventDefault: function(){//取消默认事件行为
                if (event.preventDefault)
                {
                    event.preventDefault();
                }else {
                    event.returnValue = false;
                }
            },
            removeHandler: function(element,type,handler){//取消事件
                if (element.removeEventListener)
                {
                    element.removeEventListener(type,handler,false)
                }else if (element.dettchEvent)
                {
                    element.dettchEvent('on'+type,handler);
                }else {
                    element['on'+type] = null;
                }
            },
            stopPropagation: function(event){//取消冒泡机制
                if (event.stopPropagation)
                {
                    event.stopPropagation();
                }else {
                    event.cancleBubble = true;
                }
            },
            getRelatedTarget: function(event){
                if (event.relatedTarget)
                {
                    return event.relatedTarget;//标准下返回相关元素
                }else if (event.toElement)
                {
                    return event.toElement;//mouseout事件触发，保存相关元素
                }else if (event.fromElement)
                {
                    return event.fromElement;//mouseover事件触发，保存相关元素
                }
            },
            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;
                    }
                }
            },
            getWheelDelta: function(event){
                //所以要兼容，写两个函数函数
                if (event.wheelDelta)
                {
                    /*
                        兼容opear9.5以前版本的正负相反，mousewheel
                    */
                    return (window.client.engine.opera && window.client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
                }else {
                    /*
                        兼容firefox正负和3的倍数的问题，DOMMouseScroll
                    */
                    return -event.detail*40;
                }
            }
        }
    var oDiv = document.getElementById('div1');
    var oSpan = document.getElementById('span1');
    //浏览器版本检测
    var client = function(){
        var agent = window.navigator.userAgent.toLowerCase();

        var regStr_ie = /msie [d.]+;/gi ;
        var regStr_ff = /firefox/[d.]+/gi
        var regStr_chrome = /chrome/[d.]+/gi ;
        var regStr_saf = /safari/[d.]+/gi ;
        var regStr_opera  = /opera/[d.]+/gi ;
        //引擎类型
        var engine = {
            ie:0,//ie
            gecko:0,//火狐
            webkit:0,//chrome和safari
            opera:0//opera
        };
        //浏览器
        var browser = {
            ie:0,//IE
            firefox:0,//火狐
            safari:0,//safari
            opera:0,//opera
            chrome:0,//谷歌
            ver:null//具体版本号
        }
        
        if (agent.indexOf('msir') > 0)
        {
            engine.ie = agent.match(regStr_ie)[0];
            browser.ie = engine.ie.match(/[d]+.d/)[0];
            browser.ver = engine.ie.match(/[d].+/gi)[0];
        }
        if (agent.indexOf('opera') > 0)
        {
            engine.opera = agent.match(regStr_opera)[0];
            browser.ie = engine.opera.match(/[d]+.d/)[0];
            browser.ver = engine.opera.match(/[d].+/gi)[0];
        }
        if (agent.indexOf('firefox') > 0)
        {
            engine.gecko = agent.match(regStr_ff)[0];
            browser.firefox = engine.gecko.match(/[d]+.d/)[0];
            browser.ver = engine.gecko.match(/[d].+/gi)[0];
        }
        if(agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0)
        {
            engine.webkit = agent.match(regStr_saf)[0];
            browser.safari = engine.webkit.match(/[d]+.d/)[0];
            browser.ver = engine.webkit.match(/[d].+/gi)[0];
        }
         
        //Chrome
        if(agent.indexOf("chrome") > 0)
        {
            engine.webkit = agent.match(regStr_chrome)[0];
            browser.chrome = engine.webkit.replace(/[d]+.d/)[0];
            browser.ver = engine.webkit.match(/[d].+/gi)[0];
        }

        return {
            engine:engine,
            browser:browser
        }
    }();

    (function(){
        function handleMouseWheel(event){
            event = EventUtil.getEvent(event);
            var delta = EventUtil.getWheelDelta(event);
            console.log(delta);
        }
        EventUtil.addHandler(document,'mousewheel',handleMouseWheel);
        EventUtil.addHandler(document,'DOMMouseScroll',handleMouseWheel);
    })();
 </script>

当用到鼠标兼容事件时：需要先进行浏览器的版本测定