焦點事件
一般利用這些事件與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事件
滾輪事件
客戶區座標位置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);
};
頁面座標位置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);
};
螢幕座標位置screenX和screenY；
透過此屬性可以獲得相對於螢幕的座標。
修改鍵
修改鍵有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);
}
相關元素
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;
}
}
滑鼠按鈕
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定義的，以後再討論
更多的事件資訊
detail屬性
對於滑鼠事件來說，detail包含了一個數值，表示在給定位置上發生了多少次單擊（一次mousedown和一次mouseup），次數從1開始計數，如果mousedown和mouseup之間移動了位置，detail會重設0，如果點選間隔太長也會被重設為0.
老鼠滾輪事件
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);
}else 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;
};
}
触摸设备
iOS和Android设备中：
不支持dblclick；
轻击可单击元素会触发mousemove；如果此操作会导致内容变化，将不再有其他事件发声；如果屏幕没有发生变化，那么依次发生mousedown、mouseup和click事件；
mousemove事件也会触发mouseover和mouseout事件；
两个手指操作会触发mousewheel和scroll；
无障碍性问题
使用click事件执行代码；
不要使用onmouseover向用户显示新的信息；
不要使用dblclick执行重要的操作；
