事件对象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：参看鼠标滚动事件