鼠標(biāo)事件

事件種類

鼠標(biāo)事件指與鼠標(biāo)相關(guān)的事件，主要有以下一些。

（1）click事件

click事件當(dāng)用戶在Element節(jié)點(diǎn)、document節(jié)點(diǎn)、window對象上，單擊鼠標(biāo)（或者按下回車鍵）時觸發(fā)?！笆髽?biāo)單擊”定義為，用戶在同一個位置完成一次mousedown動作和mouseup動作。它們的觸發(fā)順序是：mousedown首先觸發(fā)，mouseup接著觸發(fā)，click最后觸發(fā)。

下面是一個設(shè)置click事件監(jiān)聽函數(shù)的例子。

div.addEventListener("click", function( event ) {// 顯示在該節(jié)點(diǎn)，鼠標(biāo)連續(xù)點(diǎn)擊的次數(shù)event.target.innerHTML = "click count: " + event.detail; }, false);

　　下面的代碼是利用click事件進(jìn)行CSRF攻擊（Cross-site request forgery）的一個例子。

<a href="http://www.harmless.com/" οnclick="var f = document.createElement('form');f.style.display = 'none';this.parentNode.appendChild(f);f.method = 'POST';f.action = 'http://www.example.com/account/destroy';f.submit();return false;">偽裝的鏈接</a>

　　

（2）dblclick事件

dblclick事件當(dāng)用戶在element、document、window對象上，雙擊鼠標(biāo)時觸發(fā)。該事件會在mousedown、mouseup、click之后觸發(fā)。

（3）mouseup事件，mousedown事件

mouseup事件在釋放按下的鼠標(biāo)鍵時觸發(fā)。

mousedown事件在按下鼠標(biāo)鍵時觸發(fā)。

（4）mousemove事件

mousemove事件當(dāng)鼠標(biāo)在一個節(jié)點(diǎn)內(nèi)部移動時觸發(fā)。當(dāng)鼠標(biāo)持續(xù)移動時，該事件會連續(xù)觸發(fā)。為了避免性能問題，建議對該事件的監(jiān)聽函數(shù)做一些限定，比如限定一段時間內(nèi)只能運(yùn)行一次代碼。

（5）mouseover事件，mouseenter事件

mouseover事件和mouseenter事件，都是鼠標(biāo)進(jìn)入一個節(jié)點(diǎn)時觸發(fā)。

兩者的區(qū)別是，mouseover事件會冒泡，mouseenter事件不會。子節(jié)點(diǎn)的mouseover事件會冒泡到父節(jié)點(diǎn)，進(jìn)而觸發(fā)父節(jié)點(diǎn)的mouseover事件。mouseenter事件就沒有這種效果，所以進(jìn)入子節(jié)點(diǎn)時，不會觸發(fā)父節(jié)點(diǎn)的監(jiān)聽函數(shù)。

下面的例子是mouseenter事件與mouseover事件的區(qū)別。

// HTML代碼為 // <ul id="test"> // <li>item 1</li> // <li>item 2</li> // <li>item 3</li> // </ul>var test = document.getElementById("test");// 進(jìn)入test節(jié)點(diǎn)以后，該事件只會觸發(fā)一次 test.addEventListener("mouseenter", function( event ) {event.target.style.color = "purple";setTimeout(function() {event.target.style.color = "";}, 500); }, false);// 接入test節(jié)點(diǎn)以后，只要在子Element節(jié)點(diǎn)上移動，該事件會觸發(fā)多次 test.addEventListener("mouseover", function( event ) {event.target.style.color = "orange";setTimeout(function() {event.target.style.color = "";}, 500); }, false);

　　

（6）mouseout事件，mouseleave事件

mouseout事件和mouseleave事件，都是鼠標(biāo)離開一個節(jié)點(diǎn)時觸發(fā)。

兩者的區(qū)別是，mouseout事件會冒泡，mouseleave事件不會。子節(jié)點(diǎn)的mouseout事件會冒泡到父節(jié)點(diǎn)，進(jìn)而觸發(fā)父節(jié)點(diǎn)的mouseout事件。mouseleave事件就沒有這種效果，所以離開子節(jié)點(diǎn)時，不會觸發(fā)父節(jié)點(diǎn)的監(jiān)聽函數(shù)。

（7）contextmenu

contextmenu事件在一個節(jié)點(diǎn)上點(diǎn)擊鼠標(biāo)右鍵時觸發(fā)，或者按下“上下文菜單”鍵時觸發(fā)。

MouseEvent對象

鼠標(biāo)事件使用MouseEvent對象表示，它繼承UIEvent對象和Event對象。瀏覽器提供一個MouseEvent構(gòu)造函數(shù)，用于新建一個MouseEvent實(shí)例。

event = new MouseEvent(typeArg, mouseEventInit);

　　MouseEvent構(gòu)造函數(shù)的第一個參數(shù)是事件名稱（可能的值包括click、mousedown、mouseup、mouseover、mousemove、mouseout），第二個參數(shù)是一個事件初始化對象。該對象可以配置以下屬性。

• screenX，設(shè)置鼠標(biāo)相對于屏幕的水平坐標(biāo)（但不會移動鼠標(biāo)），默認(rèn)為0，等同于MouseEvent.screenX屬性。
• screenY，設(shè)置鼠標(biāo)相對于屏幕的垂直坐標(biāo)，默認(rèn)為0，等同于MouseEvent.screenY屬性。
• clientX，設(shè)置鼠標(biāo)相對于窗口的水平坐標(biāo)，默認(rèn)為0，等同于MouseEvent.clientX屬性。
• clientY，設(shè)置鼠標(biāo)相對于窗口的垂直坐標(biāo)，默認(rèn)為0，等同于MouseEvent.clientY屬性。
• ctrlKey，設(shè)置是否按下ctrl鍵，默認(rèn)為false，等同于MouseEvent.ctrlKey屬性。
• shiftKey，設(shè)置是否按下shift鍵，默認(rèn)為false，等同于MouseEvent.shiftKey屬性。
• altKey，設(shè)置是否按下alt鍵，默認(rèn)為false，等同于MouseEvent.altKey屬性。
• metaKey，設(shè)置是否按下meta鍵，默認(rèn)為false，等同于MouseEvent.metaKey屬性。
• button，設(shè)置按下了哪一個鼠標(biāo)按鍵，默認(rèn)為0。-1表示沒有按鍵，0表示按下主鍵（通常是左鍵），1表示按下輔助鍵（通常是中間的鍵），2表示按下次要鍵（通常是右鍵）。
• buttons，設(shè)置按下了鼠標(biāo)哪些鍵，是一個3個比特位的二進(jìn)制值，默認(rèn)為0。1表示按下主鍵（通常是左鍵），2表示按下次要鍵（通常是右鍵），4表示按下輔助鍵（通常是中間的鍵）。
• relatedTarget，設(shè)置一個Element節(jié)點(diǎn)，在mouseenter和mouseover事件時，表示鼠標(biāo)剛剛離開的那個Element節(jié)點(diǎn)，在mouseout和mouseleave事件時，表示鼠標(biāo)正在進(jìn)入的那個Element節(jié)點(diǎn)。默認(rèn)為null，等同于MouseEvent.relatedTarget屬性。

以下屬性也是可配置的，都繼承自UIEvent構(gòu)造函數(shù)和Event構(gòu)造函數(shù)。

• bubbles，布爾值，設(shè)置事件是否冒泡，默認(rèn)為false，等同于Event.bubbles屬性。
• cancelable，布爾值，設(shè)置事件是否可取消，默認(rèn)為false，等同于Event.cancelable屬性。
• view，設(shè)置事件的視圖，一般是window或document.defaultView，等同于Event.view屬性。
• detail，設(shè)置鼠標(biāo)點(diǎn)擊的次數(shù)，等同于Event.detail屬性。

下面是一個例子。

function simulateClick() {var event = new MouseEvent('click', {'bubbles': true,'cancelable': true});var cb = document.getElementById('checkbox');cb.dispatchEvent(event); }

上面代碼生成一個鼠標(biāo)點(diǎn)擊事件，并觸發(fā)該事件。

以下介紹MouseEvent實(shí)例的屬性。

altKey，ctrlKey，metaKey，shiftKey

以下屬性返回一個布爾值，表示鼠標(biāo)事件發(fā)生時，是否按下某個鍵。

• altKey屬性：alt鍵
• ctrlKey屬性：key鍵
• metaKey屬性：Meta鍵（Mac鍵盤是一個四瓣的小花，Windows鍵盤是Windows鍵）
• shiftKey屬性：Shift鍵

// HTML代碼為 // <body οnclick="showkey(event);">function showKey(e){console.log("ALT key pressed: " + e.altKey);console.log("CTRL key pressed: " + e.ctrlKey);console.log("META key pressed: " + e.metaKey);console.log("META key pressed: " + e.shiftKey); }

　　上面代碼中，點(diǎn)擊網(wǎng)頁會輸出是否同時按下Alt鍵。

button，buttons

以下屬性返回事件的鼠標(biāo)鍵信息。

（1）button

button屬性返回一個數(shù)值，表示按下了鼠標(biāo)哪個鍵。

-1：沒有按下鍵。 0：按下主鍵（通常是左鍵）。 1：按下輔助鍵（通常是中鍵或者滾輪鍵）。 2：按下次鍵（通常是右鍵）。

　　

// HTML代碼為 // <button οnmοuseup="whichButton(event);">點(diǎn)擊</button>var whichButton = function (e) {switch (e.button) {case 0:console.log('Left button clicked.');break;case 1:console.log('Middle button clicked.');break;case 2:console.log('Right button clicked.');break;default:console.log('Unexpected code: ' + e.button);} }

　　

（2）buttons

buttons屬性返回一個3個比特位的值，表示同時按下了哪些鍵。它用來處理同時按下多個鼠標(biāo)鍵的情況。

• 1：二進(jìn)制為001，表示按下左鍵。
• 2：二進(jìn)制為010，表示按下右鍵。
• 4：二進(jìn)制為100，表示按下中鍵或滾輪鍵。

同時按下多個鍵的時候，每個按下的鍵對應(yīng)的比特位都會有值。比如，同時按下左鍵和右鍵，會返回3（二進(jìn)制為011）。

clientX，clientY，movementX，movementY，screenX，screenY

以下屬性與事件的位置相關(guān)。

（1）clientX，clientY

clientX屬性返回鼠標(biāo)位置相對于瀏覽器窗口左上角的水平坐標(biāo)，單位為像素，與頁面是否橫向滾動無關(guān)。

clientY屬性返回鼠標(biāo)位置相對于瀏覽器窗口左上角的垂直坐標(biāo)，單位為像素，與頁面是否縱向滾動無關(guān)。

// HTML代碼為 // <body οnmοusedοwn="showCoords(event)">function showCoords(evt){console.log("clientX value: " + evt.clientX + "\n" +"clientY value: " + evt.clientY + "\n"); }

（2）movementX，movementY

movementX屬性返回一個水平位移，單位為像素，表示當(dāng)前位置與上一個mousemove事件之間的水平距離。在數(shù)值上，等于currentEvent.movementX = currentEvent.screenX - previousEvent.screenX。

movementY屬性返回一個垂直位移，單位為像素，表示當(dāng)前位置與上一個mousemove事件之間的垂直距離。在數(shù)值上，等于currentEvent.movementY = currentEvent.screenY - previousEvent.screenY。

（3）screenX，screenY

screenX屬性返回鼠標(biāo)位置相對于屏幕左上角的水平坐標(biāo)，單位為像素。

screenY屬性返回鼠標(biāo)位置相對于屏幕左上角的垂直坐標(biāo)，單位為像素。

// HTML代碼為 // <body οnmοusedοwn="showCoords(event)">function showCoords(evt){console.log("screenX value: " + evt.screenX + "\n"+ "screenY value: " + evt.screenY + "\n"); }

　

relatedTarget

relatedTarget屬性返回事件的次要相關(guān)節(jié)點(diǎn)。對于那些沒有次要相關(guān)節(jié)點(diǎn)的事件，該屬性返回null。

下表列出不同事件的target屬性和relatedTarget屬性含義。

事件名稱target屬性relatedTarget屬性

focusin	接受焦點(diǎn)的節(jié)點(diǎn)	喪失焦點(diǎn)的節(jié)點(diǎn)
focusout	喪失焦點(diǎn)的節(jié)點(diǎn)	接受焦點(diǎn)的節(jié)點(diǎn)
mouseenter	將要進(jìn)入的節(jié)點(diǎn)	將要離開的節(jié)點(diǎn)
mouseleave	將要離開的節(jié)點(diǎn)	將要進(jìn)入的節(jié)點(diǎn)
mouseout	將要離開的節(jié)點(diǎn)	將要進(jìn)入的節(jié)點(diǎn)
mouseover	將要進(jìn)入的節(jié)點(diǎn)	將要離開的節(jié)點(diǎn)
dragenter	將要進(jìn)入的節(jié)點(diǎn)	將要離開的節(jié)點(diǎn)
dragexit	將要離開的節(jié)點(diǎn)	將要進(jìn)入的節(jié)點(diǎn)

// HTML代碼為 // <div id="outer" style="height:50px;width:50px;border-width:1px solid black;"> // <div id="inner" style="height:25px;width:25px;border:1px solid black;"></div> // </div>var inner = document.getElementById("inner");inner.addEventListener("mouseover", function (){console.log('進(jìn)入' + event.target.id + " 離開" + event.relatedTarget.id); }); inner.addEventListener("mouseenter", function (){console.log('進(jìn)入' + event.target.id + " 離開" + event.relatedTarget.id); }); inner.addEventListener("mouseout", function (){console.log('離開' + event.target.id + " 進(jìn)入" + event.relatedTarget.id); }); inner.addEventListener("mouseleave", function (){console.log('離開' + event.target.id + " 進(jìn)入" + event.relatedTarget.id); });// 鼠標(biāo)從outer進(jìn)入inner，輸出 // 進(jìn)入inner 離開outer // 進(jìn)入inner 離開outer// 鼠標(biāo)從inner進(jìn)入outer，輸出 // 離開inner 進(jìn)入outer // 離開inner 進(jìn)入outer

　　

wheel事件

wheel事件是與鼠標(biāo)滾輪相關(guān)的事件，目前只有一個wheel事件。用戶滾動鼠標(biāo)的滾輪，就觸發(fā)這個事件。

該事件除了繼承了MouseEvent、UIEvent、Event的屬性，還有幾個自己的屬性。

deltaX：返回一個數(shù)值，表示滾輪的水平滾動量。 deltaY：返回一個數(shù)值，表示滾輪的垂直滾動量。 deltaZ：返回一個數(shù)值，表示滾輪的Z軸滾動量。 deltaMode：返回一個數(shù)值，表示滾動的單位，適用于上面三個屬性。0表示像素，1表示行，2表示頁。

　　瀏覽器提供一個WheelEvent構(gòu)造函數(shù)，可以用來生成滾輪事件的實(shí)例。它接受兩個參數(shù)，第一個是事件名稱，第二個是配置對象。

var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});

　

鍵盤事件

鍵盤事件用來描述鍵盤行為，主要有keydown、keypress、keyup三個事件。

keydown：按下鍵盤時觸發(fā)該事件。

keypress：只要按下的鍵并非Ctrl、Alt、Shift和Meta，就接著觸發(fā)keypress事件。

keyup：松開鍵盤時觸發(fā)該事件。

// HTML代碼為 // <input type="text" // name="myInput" // οnkeypress="return numbersOnly(this, event);" // οnpaste="return false;" // />function numbersOnly(oToCheckField, oKeyEvent) {return oKeyEvent.charCode === 0|| /\d/.test(String.fromCharCode(oKeyEvent.charCode)); }

　　如果用戶一直按鍵不松開，就會連續(xù)觸發(fā)鍵盤事件，觸發(fā)的順序如下。

keydown

keypress

keydown

keypress

（重復(fù)以上過程）

keyup

下面就是KeyboardEvent實(shí)例的屬性介紹。

?

altKey，ctrlKey，metaKey，shiftKey

以下屬性返回一個布爾值，表示是否按下對應(yīng)的鍵。

• altKey：alt鍵
• ctrlKey：ctrl鍵
• metaKey：meta鍵（mac系統(tǒng)是一個四瓣的小花，windows系統(tǒng)是windows鍵）
• shiftKey：shift鍵

function showChar(e){console.log("ALT: " + e.altKey);console.log("CTRL: " + e.ctrlKey);console.log("Meta: " + e.metaKey);console.log("Meta: " + e.shiftKey); }

　　

key，charCode

key屬性返回一個字符串，表示按下的鍵名。如果同時按下一個控制鍵和一個符號鍵，則返回符號鍵的鍵名。比如，按下Ctrl+a，則返回a。如果無法識別鍵名，則返回字符串Unidentified。

主要功能鍵的鍵名（不同的瀏覽器可能有差異）：Backspace，Tab，Enter，Shift，Control，Alt，CapsLock，CapsLock，Esc，Spacebar，PageUp，PageDown，End，Home，Left，Right，Up，Down，PrintScreen，Insert，Del，Win，F1～F12，NumLock，Scroll等。

charCode屬性返回一個數(shù)值，表示keypress事件按鍵的Unicode值，keydown和keyup事件不提供這個屬性。注意，該屬性已經(jīng)從標(biāo)準(zhǔn)移除，雖然瀏覽器還支持，但應(yīng)該盡量不使用。

?

轉(zhuǎn)載于:https://www.cnblogs.com/yangxunwu1992/p/4803437.html

總結(jié)

以上是生活随笔為你收集整理的javascript高级程序设计---Event对象二的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。