javascript
javascript高级程序设计---Event对象二
鼠標事件
事件種類
鼠標事件指與鼠標相關的事件，主要有以下一些。
（1）click事件
click事件當用戶在Element節點、document節點、window對象上，單擊鼠標（或者按下回車鍵）時觸發。“鼠標單擊”定義為，用戶在同一個位置完成一次mousedown動作和mouseup動作。它們的觸發順序是：mousedown首先觸發，mouseup接著觸發，click最后觸發。
下面是一個設置click事件監聽函數的例子。
div.addEventListener("click", function( event ) {// 顯示在該節點，鼠標連續點擊的次數event.target.innerHTML = "click count: " + event.detail; }, false);下面的代碼是利用click事件進行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事件當用戶在element、document、window對象上，雙擊鼠標時觸發。該事件會在mousedown、mouseup、click之后觸發。
（3）mouseup事件，mousedown事件
mouseup事件在釋放按下的鼠標鍵時觸發。
mousedown事件在按下鼠標鍵時觸發。
（4）mousemove事件
mousemove事件當鼠標在一個節點內部移動時觸發。當鼠標持續移動時，該事件會連續觸發。為了避免性能問題，建議對該事件的監聽函數做一些限定，比如限定一段時間內只能運行一次代碼。
（5）mouseover事件，mouseenter事件
mouseover事件和mouseenter事件，都是鼠標進入一個節點時觸發。
兩者的區別是，mouseover事件會冒泡，mouseenter事件不會。子節點的mouseover事件會冒泡到父節點，進而觸發父節點的mouseover事件。mouseenter事件就沒有這種效果，所以進入子節點時，不會觸發父節點的監聽函數。
下面的例子是mouseenter事件與mouseover事件的區別。
// HTML代碼為 // <ul id="test"> // <li>item 1</li> // <li>item 2</li> // <li>item 3</li> // </ul>var test = document.getElementById("test");// 進入test節點以后，該事件只會觸發一次 test.addEventListener("mouseenter", function( event ) {event.target.style.color = "purple";setTimeout(function() {event.target.style.color = "";}, 500); }, false);// 接入test節點以后，只要在子Element節點上移動，該事件會觸發多次 test.addEventListener("mouseover", function( event ) {event.target.style.color = "orange";setTimeout(function() {event.target.style.color = "";}, 500); }, false);
（6）mouseout事件，mouseleave事件
mouseout事件和mouseleave事件，都是鼠標離開一個節點時觸發。
兩者的區別是，mouseout事件會冒泡，mouseleave事件不會。子節點的mouseout事件會冒泡到父節點，進而觸發父節點的mouseout事件。mouseleave事件就沒有這種效果，所以離開子節點時，不會觸發父節點的監聽函數。
（7）contextmenu
contextmenu事件在一個節點上點擊鼠標右鍵時觸發，或者按下“上下文菜單”鍵時觸發。
MouseEvent對象
鼠標事件使用MouseEvent對象表示，它繼承UIEvent對象和Event對象。瀏覽器提供一個MouseEvent構造函數，用于新建一個MouseEvent實例。
event = new MouseEvent(typeArg, mouseEventInit);MouseEvent構造函數的第一個參數是事件名稱（可能的值包括click、mousedown、mouseup、mouseover、mousemove、mouseout），第二個參數是一個事件初始化對象。該對象可以配置以下屬性。
- screenX，設置鼠標相對于屏幕的水平坐標（但不會移動鼠標），默認為0，等同于MouseEvent.screenX屬性。
- screenY，設置鼠標相對于屏幕的垂直坐標，默認為0，等同于MouseEvent.screenY屬性。
- clientX，設置鼠標相對于窗口的水平坐標，默認為0，等同于MouseEvent.clientX屬性。
- clientY，設置鼠標相對于窗口的垂直坐標，默認為0，等同于MouseEvent.clientY屬性。
- ctrlKey，設置是否按下ctrl鍵，默認為false，等同于MouseEvent.ctrlKey屬性。
- shiftKey，設置是否按下shift鍵，默認為false，等同于MouseEvent.shiftKey屬性。
- altKey，設置是否按下alt鍵，默認為false，等同于MouseEvent.altKey屬性。
- metaKey，設置是否按下meta鍵，默認為false，等同于MouseEvent.metaKey屬性。
- button，設置按下了哪一個鼠標按鍵，默認為0。-1表示沒有按鍵，0表示按下主鍵（通常是左鍵），1表示按下輔助鍵（通常是中間的鍵），2表示按下次要鍵（通常是右鍵）。
- buttons，設置按下了鼠標哪些鍵，是一個3個比特位的二進制值，默認為0。1表示按下主鍵（通常是左鍵），2表示按下次要鍵（通常是右鍵），4表示按下輔助鍵（通常是中間的鍵）。
- relatedTarget，設置一個Element節點，在mouseenter和mouseover事件時，表示鼠標剛剛離開的那個Element節點，在mouseout和mouseleave事件時，表示鼠標正在進入的那個Element節點。默認為null，等同于MouseEvent.relatedTarget屬性。
以下屬性也是可配置的，都繼承自UIEvent構造函數和Event構造函數。
- bubbles，布爾值，設置事件是否冒泡，默認為false，等同于Event.bubbles屬性。
- cancelable，布爾值，設置事件是否可取消，默認為false，等同于Event.cancelable屬性。
- view，設置事件的視圖，一般是window或document.defaultView，等同于Event.view屬性。
- detail，設置鼠標點擊的次數，等同于Event.detail屬性。
下面是一個例子。
function simulateClick() {var event = new MouseEvent('click', {'bubbles': true,'cancelable': true});var cb = document.getElementById('checkbox');cb.dispatchEvent(event); }上面代碼生成一個鼠標點擊事件，并觸發該事件。
以下介紹MouseEvent實例的屬性。
altKey，ctrlKey，metaKey，shiftKey
以下屬性返回一個布爾值，表示鼠標事件發生時，是否按下某個鍵。
- altKey屬性：alt鍵
- ctrlKey屬性：key鍵
- metaKey屬性：Meta鍵（Mac鍵盤是一個四瓣的小花，Windows鍵盤是Windows鍵）
- shiftKey屬性：Shift鍵
上面代碼中，點擊網頁會輸出是否同時按下Alt鍵。
button，buttons
以下屬性返回事件的鼠標鍵信息。
（1）button
button屬性返回一個數值，表示按下了鼠標哪個鍵。
-1：沒有按下鍵。 0：按下主鍵（通常是左鍵）。 1：按下輔助鍵（通常是中鍵或者滾輪鍵）。 2：按下次鍵（通常是右鍵）。// HTML代碼為 // <button οnmοuseup="whichButton(event);">點擊</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個比特位的值，表示同時按下了哪些鍵。它用來處理同時按下多個鼠標鍵的情況。
- 1：二進制為001，表示按下左鍵。
- 2：二進制為010，表示按下右鍵。
- 4：二進制為100，表示按下中鍵或滾輪鍵。
同時按下多個鍵的時候，每個按下的鍵對應的比特位都會有值。比如，同時按下左鍵和右鍵，會返回3（二進制為011）。
clientX，clientY，movementX，movementY，screenX，screenY
以下屬性與事件的位置相關。
（1）clientX，clientY
clientX屬性返回鼠標位置相對于瀏覽器窗口左上角的水平坐標，單位為像素，與頁面是否橫向滾動無關。
clientY屬性返回鼠標位置相對于瀏覽器窗口左上角的垂直坐標，單位為像素，與頁面是否縱向滾動無關。
// 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屬性返回一個水平位移，單位為像素，表示當前位置與上一個mousemove事件之間的水平距離。在數值上，等于currentEvent.movementX = currentEvent.screenX - previousEvent.screenX。
movementY屬性返回一個垂直位移，單位為像素，表示當前位置與上一個mousemove事件之間的垂直距離。在數值上，等于currentEvent.movementY = currentEvent.screenY - previousEvent.screenY。
（3）screenX，screenY
screenX屬性返回鼠標位置相對于屏幕左上角的水平坐標，單位為像素。
screenY屬性返回鼠標位置相對于屏幕左上角的垂直坐標，單位為像素。
// HTML代碼為 // <body οnmοusedοwn="showCoords(event)">function showCoords(evt){console.log("screenX value: " + evt.screenX + "\n"+ "screenY value: " + evt.screenY + "\n"); }
relatedTarget
relatedTarget屬性返回事件的次要相關節點。對于那些沒有次要相關節點的事件，該屬性返回null。
下表列出不同事件的target屬性和relatedTarget屬性含義。
| focusin | 接受焦點的節點 | 喪失焦點的節點 |
| focusout | 喪失焦點的節點 | 接受焦點的節點 |
| mouseenter | 將要進入的節點 | 將要離開的節點 |
| mouseleave | 將要離開的節點 | 將要進入的節點 |
| mouseout | 將要離開的節點 | 將要進入的節點 |
| mouseover | 將要進入的節點 | 將要離開的節點 |
| dragenter | 將要進入的節點 | 將要離開的節點 |
| dragexit | 將要離開的節點 | 將要進入的節點 |
wheel事件
wheel事件是與鼠標滾輪相關的事件，目前只有一個wheel事件。用戶滾動鼠標的滾輪，就觸發這個事件。
該事件除了繼承了MouseEvent、UIEvent、Event的屬性，還有幾個自己的屬性。
deltaX：返回一個數值，表示滾輪的水平滾動量。 deltaY：返回一個數值，表示滾輪的垂直滾動量。 deltaZ：返回一個數值，表示滾輪的Z軸滾動量。 deltaMode：返回一個數值，表示滾動的單位，適用于上面三個屬性。0表示像素，1表示行，2表示頁。瀏覽器提供一個WheelEvent構造函數，可以用來生成滾輪事件的實例。它接受兩個參數，第一個是事件名稱，第二個是配置對象。
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});
鍵盤事件
鍵盤事件用來描述鍵盤行為，主要有keydown、keypress、keyup三個事件。
keydown：按下鍵盤時觸發該事件。
keypress：只要按下的鍵并非Ctrl、Alt、Shift和Meta，就接著觸發keypress事件。
keyup：松開鍵盤時觸發該事件。
// 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)); }如果用戶一直按鍵不松開，就會連續觸發鍵盤事件，觸發的順序如下。
keydown
keypress
keydown
keypress
（重復以上過程）
keyup
下面就是KeyboardEvent實例的屬性介紹。
?
altKey，ctrlKey，metaKey，shiftKey
以下屬性返回一個布爾值，表示是否按下對應的鍵。
- altKey：alt鍵
- ctrlKey：ctrl鍵
- metaKey：meta鍵（mac系統是一個四瓣的小花，windows系統是windows鍵）
- shiftKey：shift鍵
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屬性返回一個數值，表示keypress事件按鍵的Unicode值，keydown和keyup事件不提供這個屬性。注意，該屬性已經從標準移除，雖然瀏覽器還支持，但應該盡量不使用。
?
轉載于:https://www.cnblogs.com/yangxunwu1992/p/4803437.html
總結
以上是生活随笔為你收集整理的javascript高级程序设计---Event对象二的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 为什么小睡只给9分钟？iPhone帮你战
- 下一篇： 自定义JSP中的Taglib标签之四自定