JavaScript事件类型中焦点、鼠标和滚轮事件详解
本文针对JavaScript事件中“事件类型”下“焦点、鼠标和滚轮事件”的注意要点进行整理，分享给大家供大家参考，具体内容如下
一、焦点事件
一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合。主要有：
- blur：元素失去焦点，不会冒泡；
- DOMFocusIn：同HTML事件focus，于DOM3遭废弃，选用focusin；
- DOMFocusOut：同HTML事件blur，于DOM3遭废弃，选用focusout；
- focus：元素获得焦点，不回冒泡；
- focusin：获得焦点，与HTML事件focus等价，但会冒泡；
- focusout：失去焦点，与HTML事件blur等价；
如：
window.onfocus=function(){
console.log('focus');//focus
console.log(document.hasFocus());//True
}
window.onblur=function(){
console.log('blur');//blur
console.log(document.hasFocus());//False
}
当焦点从页面中的一个元素转移到另一个元素会触发下面的事件：
focusout-->focusin-->blur-->DOMFocusOut-->focus-->DOMFocusIn
二、鼠标事件
DOM3级事件中定义了9个鼠标事件：
- click
- dblclick
- mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发这个事件；
- mouseup：用户释放鼠标按钮时触发，不能通过键盘触发这个事件；
- mousemove：不能通过键盘触发这个事件；
- mouseenter：不冒泡，且光标移动到后代元素上不会触发；
- mouseleave：不冒泡，且光标移动到后代元素上不会触发；
- mouseover：光标移动到后代元素上会触发；
- mouseout：光标移动到后代元素上会触发；
举例如下：
div.onmouseover=function(){
console.log('mouseover');//在子元素上会触发
}
div.onmouseout=function(){
console.log('mouseout');//在子元素上会触发
}
div.onmouseenter=function(){
console.log('mouseenter');//在子元素上不会触发
}
div.onmouseleave=function(){
console.log('mouseleave');//在子元素上不会触发
}
只有在同一个元素上相继除法mousedown和mouseup事件，才会触发click事件；只有触发两次click事件，才会触发依次dblclick事件。
顺序如下：
mousedown-->mouseup-->click-->mousedown-->mouseup-->click-->dblclick
IE8之前的版本中有一个bug，在双击事件中，会跳过第二个mousedown和click事件
三、滚轮事件
1、客户区坐标位置clientX和clientY属性
如：
window.onmousemove=function(){
clickX=event.clientX;
clickY=event.clientY;
vardiv=document.createElement("img");
div.src="hhh.gif"
div.style.position="absolute";
div.style.width='100px';
div.style.left=clickX+"px";
div.style.top=clickY+"px";
document.body.appendChild(div);
};
2、页面坐标位置pageX与pageY；
window.onclick=function(){
clickX=event.pageX;
clickY=event.pageY;
vardiv=document.createElement("img");
div.src="ppp.png"
div.style.position="absolute";
div.style.width='100px';
div.style.left=clickX+"px";
div.style.top=clickY+"px";
document.body.appendChild(div);
};
在IE8及更早版本中不支持这个页面坐标位置，可以计算出来，需要用到混合模式下的document.body和标准模式下的document.documentElement中的scrollLeft和scrollTop属性：
if(clickX===undefined){
clickX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
};
if(clickY===undefined){
clickY=event.clientY+(document.body.scrollTop||document.documentElement.scrollTop);
};
3、屏幕坐标位置screenX和screenY；
通过该属性可以获得相对于屏幕的坐标。
4、修改键
修改键有Shift、Ctrl、Alt、Meta（window上的Windows键，苹果机上的Cmd键）；对应的修改键的状态是shiftKey、ctrlKey、altKey、metaKey，这些属性包含的都是布尔值，如果相应的键被按下了，则为true，否则为false。如：
vararray=[];
vartiming=setTimeout(showArray,100);
window.onclick=function(){
if(event.shiftKey){
array.push("shift");
};
if(event.ctrlKey){
array.push("ctrl");
};
if(event.altKey){
array.push("alt");
};
if(event.metaKey){
array.push("meta");
};
};
functionshowArray(){
varstr=array.toString();
varnewP=document.createElement("p");
newP.appendChild(document.createTextNode(str));
document.body.appendChild(newP);
timing=setTimeout(showArray,1000);
}
5、相关元素
event.relatedTarget与event.target；
relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值；对于其他事件的值则是null；IE8之前的版本不支持relatedTarget属性，在mouseover事件触发时，IE的fromElement属性中保存了相关元素；在mouseout事件触发时，IE的toElement属性中保存着相关元素。
如：
vardot=document.getElementById("dot");
dot.onmouseout=function(){
console.log("mouseoutfrom"+event.target.tagName+"to"+event.relatedTarget.tagName);
};
如：
functiongetRelatedTarget(){
if(event.ralatedTarget){
returnevent.relatedTarget;
}elseif(event.toElement){
returnevent.toElement;
}elseif(event.fromElement){
returnevent.fromElement;
}else{
returnnull;
}
}
四、鼠标按钮
1、button属性
DOM的event.button属性有三个值：0为主鼠标按钮、1为中间鼠标按钮、2为次鼠标按钮。在常规设置中，主鼠标按钮就是鼠标左键；次鼠标按钮就是鼠标右键。
IE8及之前的版本也提供了button属性，但这个属性的值与DOM的button属性有很大差异：
- 0：没有按下鼠标按钮；
- 1：主鼠标按钮；
- 2：次鼠标按钮；
- 3：同时按下主鼠标按钮和次鼠标按钮；
- 4：中间鼠标按钮；
- 5：同时按下主鼠标按钮和中间鼠标按钮；
- 6：同时按下次鼠标按钮和中间鼠标按钮；
- 7：同时按下三个鼠标按钮
兼容版：
functiongetButton(){
if(document.implementation.hasFeature("MouseEvents","2.0")){
returnevent.button;
}else{
switch(event.button){
case0:
case1:
case3:
case5:
case7:
return0;
case2:
case6:
return2;
case4:
return1;
}
}
}
另外，如果要屏蔽鼠标右键，应该使用：
document.oncontextmenu=function(event){
//if(window.event){
//event=window.event;
//}
//try{
//varthe=event.srcElement;
//if(!((the.tagName=="INPUT"&&the.type.toLowerCase()=="text")||the.tagName=="TEXTAREA")){
//returnfalse;
//}
//returntrue;
//}catch(e){
//returnfalse;
//}
returnfalse;
}
这个事件是HTML5定义的，以后再讨论
2、更多的事件信息
detail属性
对于鼠标事件来说，detail包含了一个数值，表示在给定位置上发生了多少次单击（一次mousedown和一次mouseup），次数从1开始计数，如果mousedown和mouseup之间移动了位置，detail会被重置0，如果单击间隔太长也会被重置为0.
3、鼠标滚轮事件
mousewheel事件和wheelDelta属性
在垂直放向上滚动页面时，就会触发mousewheel，event对象里面的wheelDelta属性则表示当用户向前滚动滚轮时，wheelDelta是120的倍数；当向后滚动滚轮时，wheelDelta是-120的倍数。如：
varclientHeight=document.documentElement.clientHeight;
vardivs=document.getElementsByTagName("div");
for(vari=0;i<divs.length;i++){
divs[i].style.height=clientHeight+"px";
};
window.onmousewheel=function(){
if(event.wheelDelta<=-120){
window.scrollBy(0,clientHeight);
}elseif(event.wheelDelta>=120){
window.scrollBy(0,-clientHeight);
};
}
另外，在Opera9.5之前的版本中，wheelDelta值的正负号是颠倒的。
此外，Firefox支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚动滚轮时除法。有关鼠标滚轮的信息保存在detail属性中。向前滚动这个属性的值为-3的倍数，向后滚动，这个属性的值是3的倍数。
通用版：
functiongetWheelDelta(){
if(event.wheelDelta){
return(client.engine.opera&&client.engine.opera<9.5?-event.wheelDelta:event.wheelDelta);
}else{
return-event.detail*40;
};
}
4、触摸设备
iOS和Android设备中：
- 不支持dblclick；
- 轻击可单击元素会触发mousemove；如果此操作会导致内容变化，将不再有其他事件发声；如果屏幕没有发生变化，那么依次发生mousedown、mouseup和click事件；
- mousemove事件也会触发mouseover和mouseout事件；
- 两个手指操作会触发mousewheel和scroll；
5、无障碍性问题
- 使用click事件执行代码；
- 不要使用onmouseover向用户显示新的信息；
- 不要使用dblclick执行重要的操作；
以上就是本文的全部内容，希望对大家的学习有所帮助。