鼠标和滚轮事件

鼠标事件是WEB开发中最常用的一类事件，鼠标时最主要的定位设备

1. click
   在用户单击鼠标按钮（左侧按钮）或者按下回车键触发。onclick事件既可以通过键盘也可以通过鼠标执行
2. dblclick
   在用户双击鼠标时（左侧按钮）时触发。DOM3级纳入了标准
   执行顺序是：
   　　mousedown
          mouseup
   　　click
          mousedown
          mouseup
          click
          dblclick
3. mousedown
   在用户按下了任意鼠标按钮时触发，不能通过键盘进行触发
4. mouseenter
   在鼠标光标从元素外部首次移动到元素范围之内时触发，，这个事件不会冒泡，并且在光标移动到后代元素上不会触发。DOM3级纳入标准
5. mouseleave
   在鼠标光标从元素内部首次移动到元素范围之外时触发，，这个事件不会冒泡，并且在光标移动到后代元素上不会触发。DOM3级纳入标准
6. mousemove
   在鼠标指针在元素内部移动时重复的触发，不能通过键盘触发这个事件
7. mouseout
   在鼠标指针位于一个元素之上，然后用户将其移入另一个元素时触发。不能通过键盘触发这个事件
8. mouseover
   在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发，不能通过键盘触发
9. mouseup
   在用户释放鼠标按钮时触发，不能通过键盘触发这个事件。

页面上所有的元素都支持鼠标事件。除了mousedown、mouseleave，所有鼠标事件都冒泡，也可以被取消，取消鼠标事件将会影响浏览器的默认行为，取消鼠标事件的默认行为还会影响其他事件，因为鼠标事件和其他事件是密不可分的。

只有在同一个元素上触发了mousedown、mouseup事件，才会触发click事件，如果其中任何一个被取消，就不会触发click事件，。

类似的只有触发两次click事件，才会触发一次dblclick事件，只要阻止了其中一个click事件的触发，就不会触发dblclick事件。

 var isSupported = document.implementation.hasFeature('MouseEvent','3.0');

来检测DOM3级事件是否支持上面所有的事件、

mousewheel

鼠标的滚轮事件

 firefox和其他标准浏览器（包括IE）的滚轮事件名称不一样为DOMMOuseEvent，而且firefox的向下滑动为正向上为负，和标准浏览器相反（包括IE）

添加滚轮事件的兼容性写法：

define(function(require, exports, module) {
    exports.addEvent = (function(window, undefined) {        
        var _eventCompat = function(event) {
            var type = event.type;
            if (type == 'DOMMouseScroll' || type == 'mousewheel') {
                event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
            }
            //alert(event.delta);
            if (event.srcElement && !event.target) {
                event.target = event.srcElement;    
            }
            if (!event.preventDefault && event.returnValue !== undefined) {
                event.preventDefault = function() {
                    event.returnValue = false;
                };
            }
            /* 
               ......其他一些兼容性处理 */
            return event;
        };
        if (window.addEventListener) {
            return function(el, type, fn, capture) {
                if (type === "mousewheel" && document.mozFullScreen !== undefined) {
                    type = "DOMMouseScroll";
                }
                el.addEventListener(type, function(event) {
                    fn.call(this, _eventCompat(event));
                }, capture || false);
            }
        } else if (window.attachEvent) {
            return function(el, type, fn, capture) {
                el.attachEvent("on" + type, function(event) {
                    event = event || window.event;
                    fn.call(el, _eventCompat(event));    
                });
            }
        }
        return function() {};    
    })(window);        
});

使用滚轮事件

addEvent(dom, "mousewheel", function(event) {
    if (event.delta < 0) { alert("鼠标向上滚了！"); }
});