事件类型--鼠标与滚轮事件

1. UI事件
2. 焦点事件
3. 鼠标事件
4. 滚轮事件
5. 文本事件
6. 键盘事件
7. 合成事件
8. 变动事件
   

   ---

【鼠标与滚轮事件】

1. click      单击or按下回车键时触发
2. dblclick   双击
3. mousedown  按下任意鼠标按钮时触发
4. mouseenter 不冒泡
5. mouseleave 不冒泡
6. mousemove  在元素内移动时重复触发
7. mouseout   从目标元素移出到相关元素
8. mouseover  从相关元素进入到目标元素
9. mouseup    释放鼠标按钮时触发
10.mousewheel 用户使用鼠标滚轮时触发

在同个元素上相继触发mousedown和mouseup，才会触发click事件；
连续触发两次click事件，才会触发dblclick事件。

---

【关于鼠标的位置】

1.在浏览器视口中的坐标：
clientX   clienY  （不包括页面滚动的距离）

2.在页面中的坐标 :  
pageX     pageY    (IE不支持，可通过在视口中的坐标+滚动位置来实现)

var xx=document.getElementById("xx");
    EventUnit.addHandler(xx,"click",function(event){
        event=EventUnit.getEvent(event);
        var pageX=event.pageX;
        var pageY=event.pageY;

        //IE8及更早版本
        if(pageX===undefined){
        pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
        }
        if(pageY===undefined){
        pageY=event.clientY+(document.body.scrollTop||document.documentElement.scrollTop);
        }
    });

3.在屏幕中的坐标：
screenX   screenY

---

【获取mouseover和mouseout的相关元素】

DOM：          event.relatedTarget
IE8及更早版本： event.fromElement (获取mouseover的相关元素)
              event.toElement(获取mouseout的相关元素)

function getRelatedTarget(event){
    if(event.relatedTarget){
        return event.relatedTarget;
    }
    //IE8及更早版本
    else if(event.toElement){
        return event.toElement;//关于mouseout事件
    }
    else if(event.fromElement){
        return event.fromElement;//关于mouseover事件
    }
    else{
        return null;
    }
}

【获得鼠标按钮值】

event.button

0：左键
1：滚轮
2：右键

function getButton(event){
    if(document.implementation.hasFeature("MouseEvents","2.0")){
        return event.button;
    }
    else{
        switch(event.button){
            case0:
            case1:
            case3:
            case5:
            case7:
                return0;
            case2:
            case6:
                return2;
            case4:
                return1;
            }
    }
}

---

【获得滚轮信息】

event.wheelDelta

向前滚动:  为120的倍数
向后滚动:  为-120的倍数

对于Opera9.5及更早版本
向前滚动:  为-120的倍数
向后滚动:  为120的倍数

对于firefox，没有mousewheel事件的event.wheelDelta属性，但有DOMMouseScroll事件的event.detail属性
向前滚动:  为-3的倍数
向后滚动:  为3的倍数

function getWheelDelta(event){
    if(event.wheelDelta){
        return (client.engine.opera && client.engine.opera<9.5 ? -event.wheelDelta : event.wheelDelta);
    }
    else{
        return -event.detail*40;
    }
}