DOM3級(jí)事件中定義了以下9個(gè)鼠標(biāo)事件：
- click：在用戶單擊主鼠標(biāo)按鈕或者按下回車鍵時(shí)觸發(fā)。意味著onclick事件處理程序既可以通過鍵盤也可以i通過鼠標(biāo)執(zhí)行。
- dbclick：在用戶雙擊主鼠標(biāo)按鈕時(shí)觸發(fā)。（在DOM2中沒有規(guī)定，在DOM3中做了規(guī)定）
- mousedown：在用戶按下任意鼠標(biāo)按鈕時(shí)觸發(fā)。
- mouseenter：在鼠標(biāo)光標(biāo)從元素外部首次移動(dòng)到元素范圍之內(nèi)時(shí)觸發(fā)。（在DOM2中沒有規(guī)定，在DOM3中做了規(guī)定）
- mouseleave：在位于元素上方的鼠標(biāo)光標(biāo)移動(dòng)到元素范圍之外時(shí)觸發(fā)。（在DOM2中沒有規(guī)定，在DOM3中做了規(guī)定）
- mousemove：當(dāng)鼠標(biāo)指針在元素內(nèi)部移動(dòng)時(shí)重復(fù)的觸發(fā)。
- mouseout：在鼠標(biāo)位于一個(gè)元素上方，然后移動(dòng)到另一個(gè)元素時(shí)觸發(fā)，另一個(gè)元素可以位于另一個(gè)元素的外部，也可以是這個(gè)元素的子元素；不能通過鍵盤觸發(fā)。
- mouseover：在鼠標(biāo)位于一個(gè)元素外部，然后將其首次移動(dòng)到另一個(gè)元素邊界之內(nèi)時(shí)觸發(fā)；不能通過鍵盤觸發(fā)
- mouseup：釋放鼠標(biāo)按鈕時(shí)觸發(fā)；不能通過鍵盤觸發(fā)。
除了mouseenter、mouseleave、dbclick是“DOM3級(jí)事件”新增之外，其它事件都是“DOM2級(jí)事件”中定義的。
在一個(gè)元素上相繼觸發(fā)mousedown和mouseup事件，才會(huì)觸發(fā)click事件。兩次click事件相繼觸發(fā)才會(huì)觸發(fā)dblclick事件。如果取消 了mousedown或mouseup中的一個(gè)，click事件就不會(huì)被觸發(fā)。直接或間接取消了click事件，dblclick事件就不會(huì)被觸發(fā)了。
這四個(gè)事件的觸發(fā)順序如下：
（1）mousedown
（2）mouseup
（3）click
（4）mousedown
（5）mouseup
（6）click
（7）dbclick
可以使用如下代碼檢測(cè)瀏覽器是否支持“DOM2級(jí)”鼠標(biāo)事件：
1 var isSupported = document.implementation.hasFeature("MouseEvents", "2.0");
2 alert(isSupported); //true
是否支持“DOM3級(jí)”鼠標(biāo)事件：
1 var isSupported = document.implementation.hasFeature("MouseEvent", "3.0");
2 alert(isSupported); //true
注意：“DOM3級(jí)”鼠標(biāo)事件的feature名為MouseEvent；而“DOM2級(jí)”為MouseEvents。
滾輪事件其實(shí)就是一個(gè)mousewheel事件。
1、客戶區(qū)坐標(biāo)位置
通過事件對(duì)象event的clientX和clientY屬性，可以訪問事件發(fā)生時(shí)鼠標(biāo)指針在視窗中的水平和垂直坐標(biāo)。
EventUtil.addHandler(document, "click", function(event) {
event =EventUtil.getEvent(event);
alert("鼠標(biāo)指針客戶區(qū)坐標(biāo)為：水平距離—" + event.clientX + "；" + "垂直距離—" + event.clientY + "");
});
注意：這些值不包括頁面滾動(dòng)的距離，因此這個(gè)位置并不表示鼠標(biāo)在頁面上的位置。
2、頁面坐標(biāo)位置
客戶區(qū)坐標(biāo)可以知道鼠標(biāo)是在視口的什么位置發(fā)生的，而通過事件對(duì)象event的pageX和pageY屬性，可以訪問事件發(fā)生時(shí)鼠標(biāo)指針在頁面中的水平和垂直坐標(biāo)。
EventUtil.addHandler(document, "click", function(event) {
event = EventUtil.getEvent(event);
alert("鼠標(biāo)指針頁面坐標(biāo)為：水平距離—" + event.pageX + "；" + "垂直距離—" + event.pageY);
4 });
在頁面沒有滾動(dòng)的情況下，pageX和pageY的值與clientX和clientY的值相等。
IE8及更早版本不支持事件對(duì)象上的頁面坐標(biāo)，不過可以使用客戶區(qū)坐標(biāo)和滾動(dòng)信息計(jì)算出來。需要用到document.body（混雜模式）或者document.documentElement（標(biāo)準(zhǔn)模式）中的scrollLeft和scrollTop屬性。
EventUtil.addHandler(document, "click", function(event) {
event = EventUtil.getEvent(event);
var pageX = event.pageX;
var pageY = event.pageY;
if(pageX === undefined) {
pageX = event.clientX + (document.body.scrollLeft || document.documentElememt.scrollLeft);
};
if(pageY === undefined) {
pageY = event.clientY + (document.body.scrollTop || document.documentElememt.scrollTop);
};
alert("鼠標(biāo)指針頁面坐標(biāo)為：水平距離—" + pageX + "；" + "垂直距離—" + pageY);
});
3、屏幕坐標(biāo)位置
通過事件對(duì)象event的screenX和screenY屬性，可以訪問事件發(fā)生時(shí)鼠標(biāo)指針在電腦屏幕中的水平和垂直坐標(biāo)。
event_util.addHandler(document, "click", function(event) {
event = event_util.getEvent(event);
alert("鼠標(biāo)指針屏幕坐標(biāo)為：水平距離—" + event.screenX + "；" + "垂直距離—" + event.screenY);
});
4、修改鍵
Shift、Ctrl、Alt、Meta這些修改鍵經(jīng)常被用來修改鼠標(biāo)事件的行為，DOM為此規(guī)定了4個(gè)屬性，表示這些修改鍵的狀態(tài)：shiftKey、ctrlKey、altKey、metaKey。這些屬性中包含的都是布爾值，如果值為true，表示相應(yīng)的鍵被按下，否則為false。當(dāng)某個(gè)鼠標(biāo)事件發(fā)生時(shí)，通過檢測(cè)這4個(gè)屬性，就能確定用戶是否按下某個(gè)修改鍵。
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var keys = new Array();
//當(dāng)屬性值為true時(shí)，將對(duì)應(yīng)修改鍵的名稱田間到keys數(shù)組中
if (event.shiftKey){
keys.push("shift");
}
if (event.ctrlKey){
keys.push("ctrl");
}
if (event.altKey){
keys.push("alt");
}
if (event.metaKey){
keys.push("meta");
}
alert("Keys: " + keys.join(","));
});
5、相關(guān)元素
對(duì)mouseover事件而言，事件的主目標(biāo)就是獲得光標(biāo)的元素，而相關(guān)元素就是失去光標(biāo)的那個(gè)元素；對(duì)mouseout事件而言，事件的主目標(biāo)就是失去光標(biāo)的元素，而相關(guān)元素就是獲得光標(biāo)的那個(gè)元素。DOM通過event事件對(duì)象的relatedTarget屬性提供了相關(guān)元素的信息，這個(gè)屬性只對(duì)mouseover和mouseout事件才包含值；對(duì)于其他事件，其值為null。
IE8及之前版本不支持relatedTarget屬性，但提供相似的屬性。在mouseover事件觸發(fā)時(shí)，IE的fromElement屬性中保存著相關(guān)元素；在mouseout事件觸發(fā)時(shí)，IE的toElement屬性中保存了相關(guān)元素。
IE9支持所有的這些屬性。
將跨瀏覽器取得相關(guān)元素的方法getRelatedTarge()添加到EventUtil對(duì)象中。
getRelatedTarget: function(event) {
if(event.relatedTarget) {
return event.relatedTarget;
} else if(event.fromElement) {
return event.fromElement;
} else if(event.toElement) {
return event.toElement;
} else {
return null;
}
}
6、鼠標(biāo)按鈕
只有在主鼠標(biāo)按鈕被單擊(或鍵盤回車鍵被按下)時(shí)才會(huì)觸發(fā)click事件，所以需要檢測(cè)按鈕的信息，對(duì)于mousedown和mouseup事件而言，在event事件對(duì)象中存在一個(gè)button屬性，表示按下或釋放的按鈕。DOM中的button屬性可能有以下三個(gè)值：0，表示主鼠標(biāo)按鈕（鼠標(biāo)左鍵）；1，表示中間按鈕；2，表示次鼠標(biāo)按鈕（鼠標(biāo)右鍵）。IE8及之前版本中，也提供button屬性，但其屬性值與DOM的不太通屬性值有很大差別。
- 0：沒有按下鼠標(biāo)按鈕；
- 1：主鼠標(biāo)按鈕；
- 2：次鼠標(biāo)按鈕；
- 3：同時(shí)按下主鼠標(biāo)按鈕和次鼠標(biāo)按鈕；
- 4：中間鼠標(biāo)按鈕；
- 5：同時(shí)按下主鼠標(biāo)按鈕和中間鼠標(biāo)按鈕；
- 6：同時(shí)按下次鼠標(biāo)按鈕和中間鼠標(biāo)按鈕；
- 7：同時(shí)按下三個(gè)鼠標(biāo)按鈕
EventUtil對(duì)象添加getButton()方法。
var EventUtil={
//省略其他代碼
getButton: function(event) {
if(document.implementation.hasFeature("MouseEvents", "2.0")) { //確定event對(duì)象中存在的button屬性中是否包含正確的值
return event.button;
} else { //不包含正確的值，說明是ie，需要對(duì)相應(yīng)的值進(jìn)行規(guī)范化，將IE模型規(guī)范化為DOM方式
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;
}
}
}
//省略其他代碼
}
7、更多的事件信息
對(duì)于鼠標(biāo)事件來說，detail屬性中包含一個(gè)數(shù)值，表示在給定位置上發(fā)生多少次單擊；在同一個(gè)位置上相繼發(fā)生mousedown和mouseup事件算作一次單擊。detail從1開始計(jì)數(shù)。如果鼠標(biāo)在mousedown和mouseup事件之間移動(dòng)了位置，則detail的值會(huì)被重置為0。
8、鼠標(biāo)滾輪事件
當(dāng)用戶通過鼠標(biāo)滾輪與頁面交互、在垂直方向上滾動(dòng)頁面時(shí)，會(huì)觸發(fā)mousewheel事件，該事件可以在任何元素上觸發(fā)，最終會(huì)冒泡到document（IE8）或window（IE9、Opera、Chrome和Safari）對(duì)象。與mousewheel事件對(duì)應(yīng)的event對(duì)象除了包含鼠標(biāo)事件的所有標(biāo)準(zhǔn)信息之外，還包含一個(gè)特殊的wheelDelta屬性；當(dāng)用戶向前滾動(dòng)鼠標(biāo)滾輪時(shí)，wheelDelta是120的倍數(shù)，當(dāng)用戶向后滾動(dòng)鼠標(biāo)滾輪時(shí)，wheelDelta是-120的倍數(shù)。
下述代碼可以得到wheelDelta的值，但多數(shù)情況下，只需要知道滾動(dòng)鼠標(biāo)滾輪的方向，而這通過檢測(cè)wheelDelta的正負(fù)號(hào)就可以確定。
EventUtil.addHandler(document, "mousewheel", function(event) {
event = EventUtil.getEvent(event);
alert(event.wheelDelta);
});
注意：在Opera9.5及之前版本中，wheelDelta的正負(fù)號(hào)是顛倒的；可以使用瀏覽器檢測(cè)技術(shù)來確定實(shí)際的值，如下：
EventUtil.addHandler(document, "mousewheel", function(event) {
event = EventUtil.getEvent(event);
var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta)
alert(delta);
});
在Firefox瀏覽器中，支持一個(gè)名為DOMMouseScroll的事件，也是在鼠標(biāo)滾輪滾動(dòng)時(shí)觸發(fā)，其被視為鼠標(biāo)事件，包含與鼠標(biāo)事件有關(guān)的所有信息；而有關(guān)鼠標(biāo)滾輪的信息則保存在detail屬性中，當(dāng)向前滾動(dòng)滾輪時(shí)，其值為-3的倍數(shù)，當(dāng)向后滾動(dòng)滾輪時(shí)，其值為3的倍數(shù)。
可以將DOMMouseScroll事件添加到頁面中的任何元素，而且該事件會(huì)冒泡到window對(duì)象。所以可以像下面這樣針對(duì)這個(gè)事件來添加事件處理程序：
EventUtil.addHandler(document, "DOMMouseScroll", function(event) {
event =EventUtil.getEvent(event);
alert(event.detail);
});
跨瀏覽器環(huán)境下的解決方案：
getWheelDelta: function(event) {
if(event.wheelDelta) {
return event.wheelDelta;
} else {
return -event.detail * 40;
}
}
