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

UI事件

焦点事件

鼠标事件

滚轮事件

文本事件

键盘事件

合成事件

变动事件

【鼠标与滚轮事件】

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及更早版本
e
96d2
lse 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;
}
}