相關閱讀：
JavaScript事件學習小結(五）js中事件類型之鼠標事件
//www.VeVB.COm/article/86259.htm
JavaScript事件學習小結（一）事件流
//www.VeVB.COm/article/86261.htm
javaScript事件學習小結（四）event的公共成員（屬性和方法）
//www.VeVB.COm/article/86262.htm
JavaScript事件學習小結(二)js事件處理程序
//www.VeVB.COm/article/86264.htm
JavaScript事件學習小結（三）js事件對象
鼠標事件
DOM3級事件中定義了9個鼠標事件。
mousedown:鼠標按鈕被按下（左鍵或者右鍵）時觸發。
不能通過鍵盤觸發。
mouseup:鼠標按鈕被釋放彈起時觸發。
不能通過鍵盤觸發。
click:單擊鼠標左鍵或者按下回車鍵時觸發。這點對確保易訪問性很重要，意味著onclick事件處理程序既可以通過鍵盤也可以通過鼠標執行。 dblclick:雙擊鼠標左鍵時觸發。 mouseover:鼠標移入目標元素上方。鼠標移到其後代元素上時會觸發。 mouseout:鼠標移除目標元素上方。
mouseenter:鼠標移入元素範圍內觸發，該事件不冒泡，即鼠標移到其後代元素上時不會觸發。
mouseleave:鼠標移出元素範圍時觸發，該事件不冒泡，即鼠標移到其後代元素時不會觸發。
mousemove:鼠標在元素內部移到時不斷觸發。
不能通過鍵盤觸發。
note:
在一個元素上相繼觸發mousedown和mouseup事件，才會觸發click事件。兩次click事件相繼觸發才會觸發dblclick事件。
如果取消了mousedown或mouseup中的一個，click事件就不會被觸發。直接或間接取消了click事件，dblclick事件就不會被觸發了。
1、事件觸發的順序
舉例：通過雙擊按鈕，看一下上面觸發的事件。
<body><input id="btn" type="button" value="click"/><script> var btn=document.getElementById("btn"); btn.addEventListener("mousedown",function(event){ console.log("mousedown"); },false); btn.addEventListener("mouseup",function(){ console.log("mouseup"); },false); btn.addEventListener("click", function () { console.log("click"); },false); btn.addEventListener("dblclick", function () { console.log("dblclick"); },false);</script></body>2、mouseenter和mouseover的區別
區別：
mouseover事件會冒泡，這意味著，鼠標移到其後代元素上時會觸發。
mouseenter事件不冒泡，這意味著，鼠標移到其後代元素上時不會觸發。
舉例：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #outer{ position: absolute; width: 200px; height: 200px; top:0; left: 0; bottom:0; right: 0; margin: auto; background-color: pink; } #inner{ position: absolute; width: 100px; height:100px; top:50%; left:50%; margin-left: -50px; margin-top: -50px;; background-color: orange; text-align: center; line-height: 100px; } #outer,#inner{ border-radius:50%; } </style> <script src="jquery-2.1.1.min.js"></script></head><body><body><div id="outer"> <div id="inner"> </div></div></body><script>var parentDiv=document.getElementById("outer");parentDiv.addEventListener("mouseover", function () { console.log("父div的mouseover事件被觸發");},false);//parentDiv.addEventListener("mouseenter", function () {// console.log("父div的mouseenter事件被觸發");//},false);//parentDiv.addEventListener("mouseout", function () {// console.log("父div的mouseout事件被觸發");//},false);//parentDiv.addEventListener("mouseleave", function () {// console.log("父div的mouseleave事件被觸發");//},false);</script></body></html>note:
mouseover對應mouseout,mouseenter對應mouseleave。效果可以取消上面代碼的註釋來看。
jquery中hover API是把mouseenter 和mouseleave組合在一起來用的。
3、鼠標左鍵和右鍵
<script type="text/javascript">document.onmousedown=function (ev){ var oEvent=ev||event; alert(oEvent.button);// IE下鼠標的左鍵是1 ， 右鍵是2 ff和chrome下鼠標左鍵是0 右鍵是2};</script>4、mouseover和mousemove的區別
一般情況下mouseover即可，特殊情況才用mousemove，mousemove更耗資源，比如要監控鼠標坐標的變化等。
以上所述是小編給大家介紹的JavaScript事件學習小結(五）js中事件類型之鼠標事件的相關知識，希望對大家有所幫助！