鼠标事件-鼠标位置和鼠标滚轮

今天又学到一些东西了，分享下。。

1、鼠标位置

（1）客户区坐标位置

          事件对象的clientX,clentY属性保存了鼠标在可视区的位置，它不包括页面滚动得距离，因此这个坐标并不表示鼠标在页面的位置。

（2）页面坐标位置

         页面坐标通过事件对象的pageX和pageY属性获得。这两个属性表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶部计算的。
         在页面没有滚动条的情况下，pageX和pageY的值与clientX和clentY的值相等。
         IE8及更早版本不支持pageX和pageY，但是可以通过客户区坐标和滚动信息(document.body.scrollTop || document.documentElement.scrollTop)计算出来。

（3）屏幕坐标位置

         通过screenX和screenY属性可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。

2、鼠标滚轮

（1）当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面就会触发mousewheel事件。

          IE、Opera、chrome和Safari都支持这个事件。与mousewheel事件对应的event对象还包含了一个特殊的wheelDelta属性。当用户向前滚动鼠标滚轮时，wheelDelta是120的倍数，当用户向后滚动鼠标滚轮时，wheelDelta是-120的倍数。
           需要注意的是在Opera9.5之前的版本中wheelDelta的值得正负号是颠倒的.
（2）Firefox支持一个名为DOMMouseScroll的类似事件，它同样包含与鼠标事件有关的所有属性，而鼠标滚轮的信息保存在detail属性中，当用户向前滚动鼠标滚轮时，detail   是-3的倍数，当用户向后滚动鼠标滚轮时，detail是-3的倍数。这个事件只能通过事件绑定来添加。

3、封装一个跨浏览器的鼠标滚轮函数，

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 ? event : window.event;
    },
    getWheelDelta: function(event){
        if (event.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40;
        }
    },
    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;
        }
    }

};