相關(guān)閱讀：
JavaScript事件學(xué)習(xí)小結(jié)(五）js中事件類型之鼠標(biāo)事件
//m.survivalescaperooms.com/article/86259.htm
JavaScript事件學(xué)習(xí)小結(jié)（一）事件流
//m.survivalescaperooms.com/article/86261.htm
javaScript事件學(xué)習(xí)小結(jié)（四）event的公共成員（屬性和方法）
//m.survivalescaperooms.com/article/86262.htm
JavaScript事件學(xué)習(xí)小結(jié)(二)js事件處理程序
//m.survivalescaperooms.com/article/86264.htm
JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對象
鼠標(biāo)事件
DOM3級事件中定義了9個(gè)鼠標(biāo)事件。
mousedown:鼠標(biāo)按鈕被按下（左鍵或者右鍵）時(shí)觸發(fā)。
不能通過鍵盤觸發(fā)。
mouseup:鼠標(biāo)按鈕被釋放彈起時(shí)觸發(fā)。
不能通過鍵盤觸發(fā)。
click:單擊鼠標(biāo)左鍵或者按下回車鍵時(shí)觸發(fā)。這點(diǎn)對確保易訪問性很重要，意味著onclick事件處理程序既可以通過鍵盤也可以通過鼠標(biāo)執(zhí)行。dblclick:雙擊鼠標(biāo)左鍵時(shí)觸發(fā)。mouseover:鼠標(biāo)移入目標(biāo)元素上方。鼠標(biāo)移到其后代元素上時(shí)會(huì)觸發(fā)。mouseout:鼠標(biāo)移除目標(biāo)元素上方。
mouseenter:鼠標(biāo)移入元素范圍內(nèi)觸發(fā)，該事件不冒泡，即鼠標(biāo)移到其后代元素上時(shí)不會(huì)觸發(fā)。
mouseleave:鼠標(biāo)移出元素范圍時(shí)觸發(fā)，該事件不冒泡，即鼠標(biāo)移到其后代元素時(shí)不會(huì)觸發(fā)。
mousemove:鼠標(biāo)在元素內(nèi)部移到時(shí)不斷觸發(fā)。
不能通過鍵盤觸發(fā)。
note:
在一個(gè)元素上相繼觸發(fā)mousedown和mouseup事件，才會(huì)觸發(fā)click事件。兩次click事件相繼觸發(fā)才會(huì)觸發(fā)dblclick事件。
如果取消 了mousedown或mouseup中的一個(gè)，click事件就不會(huì)被觸發(fā)。直接或間接取消了click事件，dblclick事件就不會(huì)被觸發(fā)了。
1、事件觸發(fā)的順序
舉例：通過雙擊按鈕，看一下上面觸發(fā)的事件。
<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的區(qū)別
區(qū)別：
mouseover事件會(huì)冒泡，這意味著，鼠標(biāo)移到其后代元素上時(shí)會(huì)觸發(fā)。
mouseenter事件不冒泡，這意味著，鼠標(biāo)移到其后代元素上時(shí)不會(huì)觸發(fā)。
舉例：
<!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事件被觸發(fā)");},false);//parentDiv.addEventListener("mouseenter", function () {// console.log("父div的mouseenter事件被觸發(fā)");//},false);//parentDiv.addEventListener("mouseout", function () {// console.log("父div的mouseout事件被觸發(fā)");//},false);//parentDiv.addEventListener("mouseleave", function () {// console.log("父div的mouseleave事件被觸發(fā)");//},false);</script></body></html>
note:
mouseover對應(yīng)mouseout,mouseenter對應(yīng)mouseleave。效果可以取消上面代碼的注釋來看。
jquery中hover API是把mouseenter 和mouseleave組合在一起來用的。
3、鼠標(biāo)左鍵和右鍵
<script type="text/javascript">document.onmousedown=function (ev){ var oEvent=ev||event; alert(oEvent.button);// IE下鼠標(biāo)的 左鍵是1 ， 右鍵是2 ff和chrome下 鼠標(biāo)左鍵是0 右鍵是2};</script>4、mouseover和mousemove的區(qū)別
一般情況下mouseover即可，特殊情況才用mousemove，mousemove更耗資源，比如要監(jiān)控鼠標(biāo)坐標(biāo)的變化等。
以上所述是小編給大家介紹的JavaScript事件學(xué)習(xí)小結(jié)(五）js中事件類型之鼠標(biāo)事件的相關(guān)知識，希望對大家有所幫助！
新聞熱點(diǎn)
疑難解答
