事件對象Event · 前端

https://www.runoob.com/jsref/dom-obj-event.html ## **事件總覽:** [事件 - Web API 接口參考 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/touchstart_event#%E4%BA%8B%E4%BB%B6%E7%B1%BB%E5%9E%8B) 1. [`afterscriptexecute`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/afterscriptexecute_event)非標準 2. [`animationcancel`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animationcancel_event) 3. [`animationend`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animationend_event) 4. [`animationiteration`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animationiteration_event) 5. [`animationstart`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animationstart_event) 6. [`auxclick`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/auxclick_event) 7. [`beforematch`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/beforematch_event "Currently only available in English (US)")實驗性 8. [`beforescriptexecute`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/beforescriptexecute_event)非標準 9. [`beforexrselect`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/beforexrselect_event "Currently only available in English (US)")實驗性 10. [`blur`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/blur_event) 11. [`click`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/click_event) 12. [`compositionend`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/compositionend_event) 13. [`compositionstart`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/compositionstart_event) 14. [`compositionupdate`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/compositionupdate_event) 15. [`contentvisibilityautostatechange`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/contentvisibilityautostatechange_event)實驗性 16. [`contextmenu`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/contextmenu_event) 17. [`copy`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/copy_event) 18. [`cut`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/cut_event) 19. [`dblclick`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/dblclick_event) 20. [`DOMActivate`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/DOMActivate_event)已棄用 21. [`DOMMouseScroll`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/DOMMouseScroll_event)非標準已棄用 22. [`error`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/error_event) 23. [`focus`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/focus_event) 24. [`focusin`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event "Currently only available in English (US)") 25. [`focusout`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/focusout_event) 26. [`fullscreenchange`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/fullscreenchange_event) 27. [`fullscreenerror`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/fullscreenerror_event) 28. [`gesturechange`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/gesturechange_event "Currently only available in English (US)")非標準 29. [`gestureend`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/gestureend_event "Currently only available in English (US)")非標準 30. [`gesturestart`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/gesturestart_event "Currently only available in English (US)")非標準 31. [`gotpointercapture`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/gotpointercapture_event) 32. [`keydown`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keydown_event) 33. [`keypress`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keypress_event)已棄用 34. [`keyup`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keyup_event) 35. [`lostpointercapture`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/lostpointercapture_event) 36. [`mousedown`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousedown_event) 37. [`mouseenter`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mouseenter_event) 38. [`mouseleave`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mouseleave_event) 39. [`mousemove`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousemove_event) 40. [`mouseout`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mouseout_event) 41. [`mouseover`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mouseover_event) 42. [`mouseup`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mouseup_event) 43. [`mousewheel`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousewheel_event)非標準已棄用 44. [`MozMousePixelScroll`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/MozMousePixelScroll_event "Currently only available in English (US)")非標準已棄用 45. [`paste`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/paste_event) 46. [`pointercancel`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/pointercancel_event) 47. [`pointerdown`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/pointerdown_event) 48. [`pointerenter`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/pointerenter_event) 49. [`pointerleave`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/pointerleave_event) 50. [`pointermove`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/pointermove_event) 51. [`pointerout`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/pointerout_event) 52. [`pointerover`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/pointerover_event) 53. [`pointerup`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/pointerup_event) 54. [`scroll`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scroll_event) 55. [`scrollend`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event "Currently only available in English (US)") 56. [`securitypolicyviolation`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/securitypolicyviolation_event "Currently only available in English (US)") 57. [`touchcancel`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/touchcancel_event) 58. [`touchend`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/touchend_event) 59. [`touchmove`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/touchmove_event) 60. *`touchstart`* 61. [`transitioncancel`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/transitioncancel_event) 62. [`transitionend`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/transitionend_event) 63. [`transitionrun`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionrun_event "Currently only available in English (US)") 64. [`transitionstart`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/transitionstart_event) 65. [`webkitmouseforcechanged`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/webkitmouseforcechanged_event "Currently only available in English (US)")非標準 66. [`webkitmouseforcedown`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/webkitmouseforcedown_event "Currently only available in English (US)")非標準 67. [`webkitmouseforceup`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/webkitmouseforceup_event "Currently only available in English (US)")非標準 68. [`webkitmouseforcewillbegin`(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Element/webkitmouseforcewillbegin_event "Currently only available in English (US)")非標準 69. [`wheel`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/wheel_event) [https://www.runoob.com/jsref/dom-obj-event.html](https://www.runoob.com/jsref/dom-obj-event.html) [https://developer.mozilla.org/zh-CN/docs/Web/API/Event](https://developer.mozilla.org/zh-CN/docs/Web/API/Event) ## 使用 HTML DOM 來分配事件 ``` document.getElementById("myBtn").onclick=function(){displayDate()}; ``` ## addEventListener() 方法 *語法：element*.addEventListener(*event, function, useCapture*); 當用戶重置窗口大小時添加事件監聽 ~~~ window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = Math.random(); }); ~~~ 當傳遞參數值時，使用"匿名函數"調用帶參數的函數： ~~~ element.addEventListener("click", function(){ myFunction(p1, p2); }); ~~~ 第三個參數? 默認值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞。冒泡傳遞:自上而下觸發事件? ? 自綁定的子節點元素向父節點依次傳遞（先child，然后parent。事件的觸發順序自內向外，這就是事件冒泡。）捕獲：自下而上觸發事件? ? ? ??自綁定的子節點元素的最高父節點依次象向綁定的子節點元素傳遞（結論：先parent,然后child。事件觸發順序變更為自外向內，這就是事件捕獲。） ## **事件冒泡（Bubble）** 就是事件向上傳導，當后代元素的事件被觸發時，其祖先元素的相同事件也會觸發例子：點擊span，父元素也觸發了點擊事件 ``` <body style="width: 1000px;height: 1000px;"> <div id="info" style="width: 100px;height:100px;background-color: aquamarine;border:5px solid darkred;"> xxx<span id="s1" style="background-color: bisque;">xxx</span> </div> <script type="text/javascript"> window.onload=function(){ var info=document.getElementById("info"); var s1=document.getElementById("s1"); s1.onclick=function(event){ console.log("span單擊事件響應函數") } info.onclick=function(event){ console.log("div單擊事件響應函數") } document.body.onclick=function(event){ console.log("body單擊事件響應函數") } } </script> </body> ``` 結果： ``` span單擊事件響應函數 div單擊事件響應函數 body單擊事件響應函數 ``` 大部分事件冒泡是很有用的，如果不想事件冒泡可以通過事件對象取消事件冒泡 ``` <body style="width: 1000px;height: 1000px;"> <div id="info" style="width: 100px;height:100px;background-color: aquamarine;border:5px solid darkred;"> xxx<span id="s1" style="background-color: bisque;">xxx</span> </div> <script type="text/javascript"> window.onload=function(){ var info=document.getElementById("info"); var s1=document.getElementById("s1"); s1.onclick=function(event){ console.log("span單擊事件響應函數") event=event||window.event; event.cancelBubble=true; } info.onclick=function(event){ console.log("div單擊事件響應函數") } document.body.onclick=function(event){ console.log("body單擊事件響應函數") } } </script> </body> ``` 結果： ``` span單擊事件響應函數 ``` **利用事件冒泡處理動態元素事件綁定的方法，專業術語叫事件委托** jquery的on方法。$("ul").on("click","li",function(){});這樣寫有事件委托。$("ul li").on();這樣寫法則沒有例子2：比如我們想要把鼠標放在li上就變黑 ``` <ul id="ft"> <li>橘子</li> <li>蘋果</li> </ul> ``` 我們可以這樣： ~~~ $("li").on("mouseover",function(){ $(this).css("background-color","#ff0000"").siblings().css("background-color","white"); }) ~~~ 但是當我們用js動態在ul上添加數據的時候我們移動到新添加的里上則沒有效果，因為在給里里添加事件的時候dom上還有有新增的li所以還需要i在綁定一次太麻煩，所以我們可以選擇**綁定他的父節點ul的事件利用冒泡來獲取動態的節點** （事件委托） ~~~ $("ul").on("mouseover",function(e){ $(e.target).css("background-color","#ddd").siblings().css("background-color","white"); }) ~~~ ## 事件對象 ### 常量 | 靜態變量 | 描述 | DOM | | :-- | :-- | :-- | | CAPTURING-PHASE | 當前事件階段為捕獲階段(1) | 1 | | AT-TARGET | 當前事件是目標階段,在評估目標事件(1) | 2 | | BUBBLING-PHASE | 當前的事件為冒泡階段 (3) | 3 | ### 屬性 | 屬性 | 描述 | DOM | | :-- | :-- | :-- | | [bubbles](https://www.runoob.com/jsref/event-bubbles.html) | 返回布爾值，指示事件是否是起泡事件類型。 | 2 | | [cancelable](https://www.runoob.com/jsref/event-cancelable.html) | 返回布爾值，指示事件是否可擁可取消的默認動作。 | 2 | | [currentTarget](https://www.runoob.com/jsref/event-currenttarget.html) | 返回其事件監聽器觸發該事件的元素。 | 2 | | eventPhase | 返回事件傳播的當前階段。 | 2 | | [target](https://www.runoob.com/jsref/event-target.html) | 返回觸發此事件的元素（事件的目標節點）。 | 2 | | [timeStamp](https://www.runoob.com/jsref/event-timestamp.html) | 返回事件生成的日期和時間。 | 2 | | [type](https://www.runoob.com/jsref/event-type.html) | 返回當前 Event 對象表示的事件的名稱。 | 2 | ### 方法 | 方法 | 描述 | DOM | | :-- | :-- | :-- | | initEvent() | 初始化新創建的 Event 對象的屬性。 | 2 | | preventDefault() | 通知瀏覽器不要執行與事件關聯的默認動作。 | 2 | | stopPropagation() | 不再派發事件。 | 2 | ## 目標事件對象 ### 方法 | 方法 | 描述 | DOM | | :-- | :-- | :-- | | addEventListener() | 允許在目標事件中注冊監聽事件(IE8 = attachEvent()) | 2 | | dispatchEvent() | 允許發送事件到監聽器上 (IE8 = fireEvent()) | 2 | | removeEventListener() | 運行一次注冊在事件目標上的監聽事件(IE8 = detachEvent()) | 2 | ## 事件監聽對象 ### 方法 | 方法 | 描述 | DOM | | :-- | :-- | :-- | | handleEvent() | 把任意對象注冊為事件處理程序 | 2 | ## 文檔事件對象 ### 方法 | 方法 | 描述 | DOM | | :-- | :-- | :-- | | createEvent() | ? | 2 | ## 鼠標/鍵盤事件對象 [https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) [https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) ### 屬性 | 屬性 | 描述 | DOM | | :-- | :-- | :-- | | [button](https://www.runoob.com/jsref/event-button.html) | 返回當事件被觸發時，哪個鼠標按鈕被點擊。 | 2 | | [buttons](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/buttons)| 當鼠標事件觸發的時，如果多個鼠標按鈕被按下（如果有的話），將會返回一個或者多個代表鼠標按鈕的數字。 | — | | [clientX](https://www.runoob.com/jsref/event-clientx.html) | 返回當事件被觸發時，鼠標指針的水平坐標（相對于瀏覽器可視窗口）。 | 2 | | [clientY](https://www.runoob.com/jsref/event-clienty.html) | 返回當事件被觸發時，鼠標指針的垂直坐標（相對于瀏覽器可視窗口）。 | 2 | |[x](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/x)| clientX的別名。 | 實驗性| |[y](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/y)| clientY的別名。 | 實驗性| | [metaKey](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/metaKey)| 當鼠標事件觸發時，如果meta鍵被按下，則返回 true；。 | — | | [movementX](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/movementX)| 鼠標指針相對于最后mousemove事件位置的X坐標。 | — | | [movementY](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/movementY)| 鼠標指針相對于最后mousemove事件位置的Y坐標。 | — | | [offsetX](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/offsetX)| 鼠標指針相對于目標節點內邊位置的X坐標。相對于帶有定位的父盒子的x坐標 | 實驗性| | [offsetY](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/offsetY)| 鼠鼠標指針相對于目標節點內邊位置的Y坐標。相對于帶有定位的父盒子的y坐標 | 實驗性| | [pageX](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/pageX)| 鼠標指針相對于整個文檔的X坐標。IE8及以下不支持 | 實驗性| | [pageY](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/pageY)| 鼠標指針相對于整個文檔的Y坐標。IE8及以下不支持 | 實驗性| | [screenX](https://www.runoob.com/jsref/event-screenx.html) | 鼠標指針相對于全局（屏幕）的X坐標。 | 2 | | [screenY](https://www.runoob.com/jsref/event-screeny.html) | 鼠標指針相對于全局（屏幕）的Y坐標。 | 2 | | [region](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/region)| 返回被點擊事件影響的點擊區域的id，如果沒有區域被影響則返回null。 | —| | [relatedTarget](https://www.runoob.com/jsref/event-relatedtarget.html) | 返回與事件的目標節點相關的節點。 | 2 | | [mozPressure](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/mozPressure) | 點擊事件發生時施加在觸摸屏或者平板設備的壓力量。這個數值在0.0（最小壓力）和1.0（最大壓力）之間。 | 2 | |[mozInputSource](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/mozInputSource) | 生成事件的類型（若干?`MOZ_SOURCE_*?`常量如下列出）。可通過該屬性獲知鼠標事件是否由真實鼠標設備觸發，亦或通過觸摸事件觸發（這可能影響處理坐標事件時的精確程度） | — | |[webkitForce](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/webkitForce)| 返回按鍵在設備上的位置 | — | | [charCode](https://www.runoob.com/jsref/event-key-charcode.html) |點擊時施加的壓力量。。 | —| | [altKey](https://www.runoob.com/jsref/event-altkey.html) | 返回當事件被觸發時，Alt（OS X 中是?Option或???）是否被按下，按下返回true。【共有】 | 2 | | [ctrlKey](https://www.runoob.com/jsref/event-ctrlkey.html) | 返回當事件被觸發時，"CTRL" 鍵是否被按下。按下返回true【共有】 | 2 | | [shiftKey](https://www.runoob.com/jsref/event-shiftkey.html) | 返回當事件被觸發時，"SHIFT" 鍵是否被按下。【共有】 | 2 | | [which](https://www.runoob.com/jsref/event-key-which.html) | 返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。已不支持，但能使用【共有】 | 2 | |[**`KeyboardEvent`**](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/altKey)獨有屬性||| | [`KeyboardEvent.code`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/code) | 返回一個[`DOMString`](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString)，其code值代表觸發事件的物理按鍵。 | — | |[`KeyboardEvent.isComposing`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/isComposing) | 如果在compositionstart之后和compositionend之前觸發事件，則返回一個true的布爾值。 | — | | [key](https://www.runoob.com/jsref/event-key-key.html) | 在按下按鍵時返回按鍵的標識符。返回一個DOMString，表示事件表示的鍵的鍵值 | 3 | | [`KeyboardEvent.locale`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/locale) | 返回一個DOMString，它表示一個語言環境字符串，該字符串指示為鍵盤配置的語言環境。如果瀏覽器或設備不知道鍵盤的語言環境，則可以為空字符串 | 3 | | [keyCode](https://www.runoob.com/jsref/event-key-keycode.html) | 返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。過時代還能使用 | 2 | | [`KeyboardEvent.location`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/location) | 返回一個數字，該數字表示鍵在鍵盤或其他輸入設備上的位置。上面的“鍵盤位置”中顯示了標識位置的常量列表。。 | 2 | | [metaKey](https://www.runoob.com/jsref/event-metakey.html) | 返回當事件被觸發時，"meta" 鍵是否被按下。 | 2 | |[`KeyboardEvent.repeat`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/repeat) | 如果按住鍵以使其自動重復，則返回一個布爾值TRUE。 | 2 | | [`KeyboardEvent.char`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/char) | 返回表示鍵的字符值的DOMString。如果鍵對應于可打印字符，則此值為包含該字符的非空Unicode字符串。如果鍵沒有可打印的表示形式，則為空字符串。【已過時】 | — | | [`KeyboardEvent.charCode`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/charCode)| 返回一個數字，該數字表示密鑰的Unicode參考號；此屬性僅由keypress事件使用。對于其char屬性包含多個字符的鍵，這是該屬性中第一個字符的Unicode值。在Firefox 26中，這將返回可打印字符的代碼。【已過時】 | — | |[`KeyboardEvent.keyIdentifier`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyIdentifier)| 此屬性是非標準的，為了支持KeyboardEvent.key而已棄用。它是DOM Level 3事件的舊版本的一部分。【已過時】 | — | | [`KeyboardEvent.keyLocation`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyLocation)| 這是KeyboardEvent.location的非標準棄用別名。它是DOM Level 3事件的舊版本的一部分。【已過時】 | — | ### 方法 | 方法 | 描述 | W3C | | :-- | :-- | :-- | | [`MouseEvent.getModifierState()`](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/getModifierState) | 返回指定修飾鍵的當前狀態。請參照KeyboardEvent.getModifierState() 查看詳情 | — | | MouseEvent.initMouseEvent() | 初始化鼠標事件對象的值 | 2 | | KeyboardEvent.initKeyboardEvent() | 初始化鍵盤事件對象的值.過時但來了個使用 | 3 | |[`KeyboardEvent.initKeyEvent()`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/initKeyEvent) |初始化KeyboardEvent對象。這僅由Firefox實現，甚至在那里不再受支持。相反，您應該使用KeyboardEvent（）構造函數。過時但還能使用 | — | |[KeyboardEvent.getModifierState()](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/getModifierState) |返回一個布爾值，指示創建事件時是否按下了Alt，Shift，Ctrl或Meta等修飾鍵 | — | ~~~ //方法1：構造函數實例化 event = new MouseEvent(typeArg, mouseEventInit); //方法2：事件響應函數被觸發 element.onmousemove=function(event){} element.click=function(event){} ... ~~~ | 屬性 | 描述 | 兼容 | | :-- | :-- | :-- | | [altKey](https://www.runoob.com/jsref/event-altkey.html) | 返回當事件被觸發時，"ALT" 是否被按下。 | — | | [`MouseEvent.button`](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/button) | 當鼠標事件觸發的時，如果鼠標按鈕被按下（如果有的話），將會返回一個數值。 | — | 例子：獲取鼠標坐標 ``` <div id="areaXY" style="width: 300px;height:200px;background-color: aquamarine;border:5px solid darkred; margin: 25px;"> 300*200 </div> <div id="info" style="width: 300px;height:40px;background-color: aquamarine;border:5px solid darkred; margin: 25px;"> </div> <script type="text/javascript"> window.onload=function(){ var info=document.getElementById("info"); var areaXY=document.getElementById("areaXY"); areaXY.onmousemove=function(event){ //IE8及以下事件響應函數被觸發時不會傳遞event對象，而是作為window的屬性保存 if(!event){ event=window.event; } event=event || window.event; var X=event.clientX; var Y=event.clientY; var sX=event.screenX; var sY=event.screenY; info.innerHTML="x:"+X+"    y:"+Y; info.innerHTML+="screenX:"+sX+"    screenX:"+sY; } } </script> ``` 例子2：參看demo/div跟隨鼠標移動例子3：參看拖拽01 例子4：參看鼠標滾動事件