- 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及更早版本
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;
}
}