本文针对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; var div = 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; var div = 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。如：
var array = [];var timing = 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); };};function showarray() { var str = array.tostring(); var newp = 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属性中保存着相关元素。
如：
var dot = document.getelementbyid(dot);dot.onmouseout = function (){ console.log(mouse out from + event.target.tagname + to + event.relatedtarget.tagname);};
如：
function getrelatedtarget() { if (event.ralatedtarget) { return event.relatedtarget; } else if (event.toelement) { return event.toelement; } else if (event.fromelement) { return event.fromelement; } else { return null; }}
四、鼠标按钮
1、button属性
dom的event.button属性有三个值：0为主鼠标按钮、1为中间鼠标按钮、2为次鼠标按钮。在常规设置中，主鼠标按钮就是鼠标左键；次鼠标按钮就是鼠标右键。
ie8及之前的版本也提供了button属性，但这个属性的值与dom的button属性有很大差异：
0：没有按下鼠标按钮；
1：主鼠标按钮；
2：次鼠标按钮；
3：同时按下主鼠标按钮和次鼠标按钮；
4：中间鼠标按钮；
5：同时按下主鼠标按钮和中间鼠标按钮；
6：同时按下次鼠标按钮和中间鼠标按钮；
7：同时按下三个鼠标按钮
兼容版：
function getbutton() { if (document.implementation.hasfeature(mouseevents, 2.0)) { return event.button; } else { switch (event.button) { case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } }}
另外，如果要屏蔽鼠标右键，应该使用：
document.oncontextmenu = function(event) { // if (window.event) { // event = window.event; // } // try { // var the = event.srcelement; // if (!((the.tagname == input && the.type.tolowercase() == text) || the.tagname == textarea)) { // return false; // } // return true; // } catch (e) { // return false; // } return false;}
这个事件是html5定义的，以后再讨论
2、更多的事件信息
detail属性
对于鼠标事件来说，detail包含了一个数值，表示在给定位置上发生了多少次单击（一次mousedown和一次mouseup），次数从1开始计数，如果mousedown和mouseup之间移动了位置，detail会被重置0，如果单击间隔太长也会被重置为0.
3、鼠标滚轮事件
mousewheel事件和wheeldelta属性
在垂直放向上滚动页面时，就会触发mousewheel，event对象里面的wheeldelta属性则表示当用户向前滚动滚轮时，wheeldelta是120的倍数；当向后滚动滚轮时，wheeldelta是-120的倍数。如：
var clientheight = document.documentelement.clientheight;var divs = document.getelementsbytagname(div);for (var i = 0; i < divs.length; i++) { divs[i].style.height = clientheight + px;};window.onmousewheel = function () { if (event.wheeldelta = 120){ window.scrollby(0,-clientheight); };}
另外，在opera 9.5之前的版本中，wheeldelta值的正负号是颠倒的。
此外，firefox支持一个名为dommousescroll的类似事件，也是在鼠标滚动滚轮时除法。有关鼠标滚轮的信息保存在detail属性中。向前滚动这个属性的值为-3的倍数，向后滚动，这个属性的值是3的倍数。
通用版：
function getwheeldelta() { 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执行重要的操作；以上就是本文的全部内容，希望对大家的学习有所帮助。