Dom3級事件中定義了9個鼠標事件
1、click事件
click：用戶單擊鼠標主按鈕（一般爲左邊按鈕）或者在獲得焦點的前提下按回車鍵時觸發。
click()方法也可以觸發click 事件。
2、dblclick事件、mousedown事件和mouseup事件
dblclick：用戶雙擊鼠標主按鈕（一般爲左邊按鈕）時觸發。
mousedown：按下任意鼠標按鈕時觸發。
mouseup：釋放鼠標按鈕時觸發。
3、mouseenter事件、mousemove事件和mouseover事件
mouseenter：鼠標光標從元素外部首次移動到元素範圍之內時觸發，這個事件不冒泡，而且在光標移動到後代元素上不會重複觸發。通常和mouseleave搭配使用。
mousemove：鼠標光標在元素內部移動時重複地觸發。
mouseover：鼠標光標位於一個元素外部，首次移動到另一個元素邊界之內（包括後代元素）時觸發。
測試代碼：
<div style='height:45px; width:150px; background:#FF0000;'>
<p style='background:#FFFFFF'><span>0</span></p>
</div>
<div style='height:45px; width:150px; background:#000000;'>
<p style='background:#FFFFFF'><span>0</span></p>
</div>
<div style='height:45px; width:150px; background:#0000FF;'>
<p style='background:#FFFFFF'><span>0</span></p>
</div>
var Div=document.getElementsByTagName('div')
var arr=['mouseenter','mousemove','mouseover']
for(var i=0,len=Div.length;i<len;i++){
(function(i){
var Span=Div[i].getElementsByTagName('span')[0]
var n=0
Div[i].addEventListener(arr[i],function(){
Span.innerHTML =n+=1
})
})(i)
}
4、mouseleave事件和mouseout事件
mouseleave：位於元素上方的鼠標光標移動到元素範圍之外時觸發，這個事件不冒泡，而且在光標移動到後代元素上不會觸發。
mouseout：鼠標光標位於一個元素上方，然後用戶將其移入另一個元素上時觸發（另一個元素可以是這個元素的外部元素，也可以是這個元素的子元素）。
測試代碼：
<div style='height:45px; width:150px; background:#FF0000;'>
<p style='background:#FFFFFF'><span>0</span></p>
</div>
<div style='height:45px; width:150px; background:#000000;'>
<p style='background:#FFFFFF'><span>0</span></p>
</div>
var Div=document.getElementsByTagName('div')
var arr=['mouseleave','mouseout']
for(var i=0,len=Div.length;i<len;i++){
(function(i){
var Span=Div[i].getElementsByTagName('span')[0]
var n=0
Div[i].addEventListener(arr[i],function(){
Span.innerHTML =n+=1
})
})(i)
}
HTML5中的contextmenu事件
contextmenu：通過單擊鼠標右鍵（在Mac中是Ctrl＋單擊）可以調出上下文菜單。開發人員可以通過此事件取消默認的上下文菜單而提供自定義的菜單。
例子：
<ul id='myMenu' style='position:absolute;visibility:hidden;background:#eee'>
<li><a href=''>Menu1</a></li>
<li><a href=''>Menu2</a></li>
<li><a href=''>Menu3</a></li>
<li><a href=''>Menu4</a></li>
</ul>
window.=function(){
var Menu=document.getElementById('myMenu')
document.addEventListener('contextmenu',function(event){
event.preventDefault();
Menu.style.left=event.pageX+'px';
Menu.style.top=event.pageY+'px';
Menu.style.visibility='visible';
})
document.addEventListener('click',function(event){
Menu.style.visibility='hidden';
})
}
文中的代碼部分，帶有“例子”和“測試代碼”字樣的，只是用來學習或測試某一功能用的代碼，不可以直接用於項目的開發中。帶有“代碼如下”字樣的，都是經過本人測試，簡單修改即可用於項目開發中的代碼，如有錯誤，歡迎指出。