JavaScript事件學(xué)習(xí)小結(jié)(五)js中事件類型之鼠標(biāo)事件
相關(guān)閱讀:
JavaScript事件學(xué)習(xí)小結(jié)(五)js中事件類型之鼠標(biāo)事件
http://www.dbjr.com.cn/article/86259.htm
JavaScript事件學(xué)習(xí)小結(jié)(一)事件流
http://www.dbjr.com.cn/article/86261.htm
javaScript事件學(xué)習(xí)小結(jié)(四)event的公共成員(屬性和方法)
http://www.dbjr.com.cn/article/86262.htm
JavaScript事件學(xué)習(xí)小結(jié)(二)js事件處理程序
http://www.dbjr.com.cn/article/86264.htm
JavaScript事件學(xué)習(xí)小結(jié)(三)js事件對(duì)象
鼠標(biāo)事件
DOM3級(jí)事件中定義了9個(gè)鼠標(biāo)事件。
mousedown:鼠標(biāo)按鈕被按下(左鍵或者右鍵)時(shí)觸發(fā)。
不能通過鍵盤觸發(fā)。
mouseup:鼠標(biāo)按鈕被釋放彈起時(shí)觸發(fā)。
不能通過鍵盤觸發(fā)。
click:單擊鼠標(biāo)左鍵或者按下回車鍵時(shí)觸發(fā)。這點(diǎn)對(duì)確保易訪問性很重要,意味著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對(duì)應(yīng)mouseout,mouseenter對(duì)應(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)知識(shí),希望對(duì)大家有所幫助!
相關(guān)文章
基于javascript實(shí)現(xiàn)圖片切換效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)圖片切換效果的相關(guān)資料,需要的朋友可以參考下2016-04-04javascript如何操作HTML下拉列表標(biāo)簽
下拉列表在網(wǎng)站前端開發(fā)中經(jīng)常遇到,如何操作html下拉列表標(biāo)簽,本篇文章給大家詳解javascript如何操作html下拉列表標(biāo)簽,需要的朋友可以來參考下2015-08-08基于Three.js實(shí)現(xiàn)360度全景圖片
這篇文章主要為大家詳細(xì)介紹了基于Three.js實(shí)現(xiàn)360度全景圖片,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12JavaScript正則表達(dá)式中g(shù)標(biāo)志詳解
正則的思想都是一樣的,但是具體的寫法會(huì)有所不同,下面這篇文章主要給大家介紹了關(guān)于JavaScript正則表達(dá)式中g(shù)標(biāo)志的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03