HTML事件大全：从window到media，详析各类浏览器行为

HTML 事件汇总

HTML事件包含Window事件、document事件、Form事件、Keybord事件、Mouse事件和Media事件。

window事件

window事件是针对window对象触发的事件。

语法：window.addEventListener()

属性类型描述备注loadEvent页面结束加载之后触发-resizeEvent当浏览器窗口被调整大小时触发-errorEvent在错误发生时触发-copyClipboardEvent文本复制时触发元素上可以监听该事件，不过会冒泡到 windowpasteClipboardEvent文本粘贴时触发元素上可以监听该事件，不过会冒泡到 windowcutClipboardEvent文本剪切时触发元素上可以监听该事件，不过会冒泡到 windowafterprintEvent文档打印之后触发-beforeprintEvent文档打印之前触发-beforunloadEvent文档卸载之前触发-errorEvent 或者 ErrorEvent在错误发生时触发-hashchangeHashChangeEvent当文档已改变时触发-messageMessageEvent在消息被触发时触发-messageerrorMessageEvent读取消息异常时触发-languagechangeEvent用户语言设置改变时触发-onlineEvent当文档上线时触发-offlineEvent当文档离线时触发-pagehidePageTransitionEvent当窗口隐藏时触发-pageshowPageTransitionEvent当窗口成为可见时触发-popstatePopStateEvent当窗口历史记录改变时触发-storageStorageEvent在 Web Storage 区域更新后触发-unloadEvent一旦页面已下载时触发（或者浏览器窗口已被关闭）-focusEvent 或者 FocusEvent元素聚焦时触发form 相关元素也可监听，不会冒泡至 window。不过事件类型为 FocusEventblurEvent 或者 FocusEvent元素失焦时触发form 相关元素也可监听，不会冒泡至 window，不过事件类型为 FocusEventunhandledrejectPromiseRejectionEvent异步错误未捕获时触发-document事件

针对document对象触发。

语法：document.addEventListener()

属性类型描述备注visibilitychangeEvent当窗口成为可见时触发window 也可监听该事件readystatechangeEvent文档解析完成且所有的子资源都加载完成触发-DOMContentLoadedEvent文档解析完成触发-form事件

由 html 表单内的动作触发的事件（应用到几乎所有 html 元素，但最常用在 form 元素中）

属性类型描述备注formchangeEvent当窗口成为可见时触发window 也可监听该事件forminputEvent文档解析完成且所有的子资源都加载完成触发-invalidEvent文档解析完成触发-resetEvent文档解析完成且所有的子资源都加载完成触发-selectEvent文档解析完成触发-submitEvent文档解析完成且所有的子资源都加载完成触发-changeEvent文档解析完成触发-blurFocusEvent元素失焦时触发window 也可监听该事件focusFocusEvent元素聚焦时触发window 也可监听该事件keyboard事件

键盘输入触发该事件

属性类型描述备注keydownKeyboardEvent在用户按下按键时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件keyupKeyboardEvent当用户释放按键时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件keypressKeyboardEvent在用户敲击按钮时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件mouse事件

鼠标事件

属性类型描述备注clickMouseEvent元素上发生鼠标点击时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件dbclickMouseEvent元素上发生鼠标双击时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件dragMouseEvent元素被拖动时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件dragendMouseEvent在拖动操作末端触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件dragenterMouseEvent当元素元素已被拖动到有效拖放区域时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件dragleaveMouseEvent当元素离开有效拖放目标时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件dragoverMouseEvent当元素在有效拖放目标上正在被拖动时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件dragstartMouseEvent在拖动操作开端触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件dropMouseEvent当被拖元素正在被拖放时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件mousedownMouseEvent当元素上按下鼠标按钮时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件mousemoveMouseEvent当鼠标指针移动到元素上时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件mouseoutMouseEvent当鼠标指针移出元素时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件mouseoverMouseEvent当鼠标指针移动到元素上时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件mouseupMouseEvent当在元素上释放鼠标按钮时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件mousewheelMouseEvent当鼠标滚轮正在被滚动时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件scrollMouseEvent当元素滚动条被滚动时触发window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件media事件

由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如