JavaScript焦点事件、鼠标事件和滚轮事件使用详解

焦点事件

一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合。主要有：

blur：元素失去焦点，不会冒泡； DOMFocusIn：同HTML事件focus，于DOM3遭废弃，选用focusin； DOMFocusOut：同HTML事件blur，于DOM3遭废弃，选用focusout； focus：元素获得焦点，不回冒泡； focusin：获得焦点，与HTML事件focus等价，但会冒泡； focusout：失去焦点，与HTML事件blur等价；如：

当焦点从页面中的一个元素转移到另一个元素会触发下面的事件：

focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn

鼠标事件

DOM3级事件中定义了9个鼠标事件：

用户按下任意鼠标按钮时触发，不能通过键盘触发这个事件； mouseup：用户释放鼠标按钮时触发，不能通过键盘触发这个事件； mousemove：不能通过键盘触发这个事件； mouseenter：不冒泡，且光标移动到后代元素上不会触发； mouseleave：不冒泡，且光标移动到后代元素上不会触发； mouSEOver：光标移动到后代元素上会触发； mouSEOut：光标移动到后代元素上会触发；

举例如下：

SEOver = 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事件

滚轮事件

客户区坐标位置clientX和clientY属性

如：

页面坐标位置pageX与pageY；

在IE8及更早版本中不支持这个页面坐标位置，可以计算出来，需要用到混合模式下的document.body和标准模式下的document.documentElement中的scrollLeft和scrollTop属性：

屏幕坐标位置screenX和screenY；

通过该属性可以获得相对于屏幕的坐标。

修改键

修改键有Shift、Ctrl、Alt、Meta（window上的Windows键，苹果机上的Cmd键）；对应的修改键的状态是shiftKey、ctrlKey、altKey、MetaKey，这些属性包含的都是布尔值，如果相应的键被按下了，则为true，否则为false。如：

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);
}

鼠标按钮

button属性

DOM的event.button属性有三个值：0为主鼠标按钮、1为中间鼠标按钮、2为次鼠标按钮。在常规设置中，主鼠标按钮就是鼠标左键；次鼠标按钮就是鼠标右键。

IE8及之前的版本也提供了button属性，但这个属性的值与DOM的button属性有很大差异：

0：没有按下鼠标按钮； 1：主鼠标按钮； 2：次鼠标按钮； 3：同时按下主鼠标按钮和次鼠标按钮； 4：中间鼠标按钮； 5：同时按下主鼠标按钮和中间鼠标按钮； 6：同时按下次鼠标按钮和中间鼠标按钮； 7：同时按下三个鼠标按钮

兼容版：

另外，如果要屏蔽鼠标右键，应该使用：

这个事件是HTML5定义的，以后再讨论

触摸设备

iOS和Android设备中：

不支持dblclick；轻击可单击元素会触发mousemove；如果此操作会导致内容变化，将不再有其他事件发声；如果屏幕没有发生变化，那么依次发生mousedown、mouseup和click事件； mousemove事件也会触发mouSEOver和mouSEOut事件；两个手指操作会触发mousewheel和scroll；

无障碍性问题

使用click事件执行代码；

不要使用onmouSEOver向用户显示新的信息；不要使用dblclick执行重要的操作；