一、JavaScript 事件 的定义 与 原理
JavaScript使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。
当我们在某个元素上添加一个事件时，根据事件执行的前后可以把它当成一个事件流，例如在DOM事件中规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段对事件做出响应。
二、HTML DOM 事件
| 序号 | 鼠标事件 | 描述 | DOM |
| 1 | onclick | 当用户点击某个对象时调用的事件句柄。 | 2 |
| 2 | oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发。 | |
| 3 | ondblclick | 当用户双击某个对象时调用的事件句柄。 | 2 |
| 4 | onmousedown | 鼠标按钮被按下。 | 2 |
| 5 | onmouseenter | 当鼠标指针移动到元素上时触发。 | 2 |
| 6 | onmouseleave | 当鼠标指针移出元素时触发。 | 2 |
| 7 | onmousemove | 鼠标被移动。 | 2 |
| 8 | onmouseover | 鼠标移到某元素之上。 | 2 |
| 9 | onmouseout | 鼠标从某元素移开。 | 2 |
| 10 | onmouseup | 鼠标按键被松开。 | 2 |
| 序号 | 键盘事件 | 描述 | DOM |
| 1 | onkeydown | 某个键盘按键被按下。 | 2 |
| 2 | onkeypress | 某个键盘按键被按下并松开。 | 2 |
| 3 | onkeyup | 某个键盘按键被松开。 | 2 |
| 序号 | 框架/对象（Frame / Object）事件 | 描述 | DOM |
| 1 | onabort | 图像的加载被中断。 ( <object>) | 2 |
| 2 | onbeforeunload | 该事件在即将离开页面（刷新或关闭）时触发 | 2 |
| 3 | onerror | 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>) | |
| 4 | onhashchange | 该事件在当前 URL 的锚部分发生修改时触发。 | |
| 5 | onload | 一张页面或一幅图像完成加载。 | 2 |
| 6 | onpageshow | 该事件在用户访问页面时触发 | |
| 7 | onpagehide | 该事件在用户离开当前网页跳转到另外一个页面时触发 | |
| 8 | onresize | 窗口或框架被重新调整大小。 | 2 |
| 9 | onscroll | 当文档被滚动时发生的事件。 | 2 |
| 10 | onunload | 用户退出页面。 ( <body> 和 <frameset>) | 2 |
| 序号 | 表单事件 | 描述 | DOM |
| 1 | onblur | 元素失去焦点时触发 | 2 |
| 2 | onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) | 2 |
| 3 | onfocus | 元素获取焦点时触发 | 2 |
| 4 | onfocusin | 元素即将获取焦点时触发 | 2 |
| 5 | onfocusout | 元素即将失去焦点时触发 | 2 |
| 6 | oninput | 元素获取用户输入时触发 | 3 |
| 7 | onreset | 表单重置时触发 | 2 |
| 8 | onsearch | 用户向搜索域输入文本时触发 ( <input="search">) | |
| 9 | onselect | 用户选取文本时触发 ( <input> 和 <textarea>) | 2 |
| 10 | onsubmit | 表单提交时触发 | 2 |
| 序号 | 剪贴板事件 | 描述 | DOM |
| 1 | oncopy | 该事件在用户拷贝元素内容时触发 | |
| 2 | oncut | 该事件在用户剪切元素内容时触发 | |
| 3 | onpaste | 该事件在用户粘贴元素内容时触发 | |
| 序号 | 打印事件 | 描述 | DOM |
| 1 | onafterprint | 该事件在页面已经开始打印，或者打印窗口已经关闭时触发 | |
| 2 | onbeforeprint | 该事件在页面即将开始打印时触发 | |
| 序号 | 拖动事件 | 描述 | DOM |
| 1 | ondrag | 该事件在元素正在拖动时触发 | |
| 2 | ondragend | 该事件在用户完成元素的拖动时触发 | |
| 3 | ondragenter | 该事件在拖动的元素进入放置目标时触发 | |
| 4 | ondragleave | 该事件在拖动元素离开放置目标时触发 | |
| 5 | ondragover | 该事件在拖动元素在放置目标上时触发 | |
| 6 | ondragstart | 该事件在用户开始拖动元素时触发 | |
| 7 | ondrop | 该事件在拖动元素放置在目标区域时触发 | |
| 序号 | 多媒体（Media）事件 | 描述 | DOM |
| 1 | onabort | 事件在视频/音频（audio/video）终止加载时触发。 | |
| 2 | oncanplay | 事件在用户可以开始播放视频/音频（audio/video）时触发。 | |
| 3 | oncanplaythrough | 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。 | |
| 4 | ondurationchange | 事件在视频/音频（audio/video）的时长发生变化时触发。 | |
| 5 | onemptied | 当期播放列表为空时触发 | |
| 6 | onended | 事件在视频/音频（audio/video）播放结束时触发。 | |
| 7 | onerror | 事件在视频/音频（audio/video）数据加载期间发生错误时触发。 | |
| 8 | onloadeddata | 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。 | |
| 9 | onloadedmetadata | 事件在指定视频/音频（audio/video）的元数据加载后触发。 | |
| 10 | onloadstart | 事件在浏览器开始寻找指定视频/音频（audio/video）触发。 | |
| 11 | onpause | 事件在视频/音频（audio/video）暂停时触发。 | |
| 12 | onplay | 事件在视频/音频（audio/video）开始播放时触发。 | |
| 13 | onplaying | 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。 | |
| 14 | onprogress | 事件在浏览器下载指定的视频/音频（audio/video）时触发。 | |
| 15 | onratechange | 事件在视频/音频（audio/video）的播放速度发送改变时触发。 | |
| 16 | onseeked | 事件在用户重新定位视频/音频（audio/video）的播放位置后触发。 | |
| 17 | onseeking | 事件在用户开始重新定位视频/音频（audio/video）时触发。 | |
| 18 | onstalled | 事件在浏览器获取媒体数据，但媒体数据不可用时触发。 | |
| 19 | onsuspend | 事件在浏览器读取媒体数据中止时触发。 | |
| 20 | ontimeupdate | 事件在当前的播放位置发生改变时触发。 | |
| 21 | onvolumechange | 事件在音量发生改变时触发。 | |
| 22 | onwaiting | 事件在视频由于要播放下一帧而需要缓冲时触发。 | |
| 序号 | 动画事件 | 描述 | DOM |
| 1 | animationend | 该事件在 CSS 动画结束播放时触发 | |
| 2 | animationiteration | 该事件在 CSS 动画重复播放时触发 | |
| 3 | animationstart | 该事件在 CSS 动画开始播放时触发 | |
| 序号 | 过渡事件 | 描述 | DOM |
| 1 | transitionend | 该事件在 CSS 完成过渡后触发。 | |
| 序号 | 其他事件 | 描述 | DOM |
| 1 | onmessage | 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发 | |
| 2 | onmousewheel | 已废弃。 使用 onwheel 事件替代 | |
| 3 | ononline | 该事件在浏览器开始在线工作时触发。 | |
| 4 | onoffline | 该事件在浏览器开始离线工作时触发。 | |
| 5 | onpopstate | 该事件在窗口的浏览历史（history 对象）发生改变时触发。 | |
| 6 | onshow | 该事件当 <menu> 元素在上下文菜单显示时触发 | |
| 7 | onstorage | 该事件在 Web Storage(HTML 5 Web 存储)更新时触发 | |
| 8 | ontoggle | 该事件在用户打开或关闭 <details> 元素时触发 | |
| 9 | onwheel | 该事件在鼠标滚轮在元素上下滚动时触发 | |
| 10 | visibilitychange | 该事件用于检测当前页面的可见性状态是否发生变化。 |
三、DOM（Document Object Model，文档对象模型）事件分为三个级别
3.1、DOM 0级事件处理
| 特点 | 将函数赋值给一个事件处理属性。 | |
| 示例 | 通过HTML属性直接定义事件处理函数，如<button id="btn" οnclick="alert('DOM0行内事件')">，或者通过JavaScript为元素的事件处理属性赋值，如document.getElementById("btn").onclick = function() { alert('事件'); }。 |
|
| 缺点 | 一个处理程序无法同时绑定多个处理函数。 | |
3.2、DOM 2级事件处理
| 特点 | 引入了addEventListener()和removeEventListener()方法，允许为同一个事件绑定多个处理函数，并可以设置事件是否在捕获阶段或冒泡阶段执行。 |
| 方法 | element.addEventListener(event, function, useCapture)：用于添加事件监听器。其中event是事件名称，function是当事件发生时调用的函数，useCapture是一个布尔值，指定事件是否在捕获阶段执行（true）或在冒泡阶段执行（false，默认值）。 element.removeEventListener(event, function, useCapture)：用于移除之前通过addEventListener()添加的事件监听器。 |
| 示例 | document.getElementById("btn").addEventListener("click", function(){}, false); |
| 兼容性 | 在IE8及以下版本中，需要使用attachEvent()和detachEvent()方法代替addEventListener()和removeEventListener()，且这两个方法不支持事件捕获阶段。 |
3.3、DOM 3级事件处理
| 特点 | 在DOM 2级事件的基础上添加了更多的事件类型，并允许自定义事件。 |
| 新增事件类型 | UI事件：当用户与页面上的元素交互时触发，如load、scroll等。 焦点事件：当元素获得或失去焦点时触发，如blur、focus等。 鼠标事件：当用户通过鼠标在页面执行操作时触发，如dblclick、mouseup等。 滚轮事件：当使用鼠标滚轮或类似设备时触发，如mousewheel。 文本事件：当在文档中输入文本时触发，如textInput。 键盘事件：当用户通过键盘在页面上执行操作时触发，如keydown、keypress等。 合成事件：当为IME（输入法编辑器）输入字符时触发，如compositionstart。 变动事件：当底层DOM结构发生变化时触发，如DOMsubtreeModified。 |
| 自定义事件 | 允许开发者自定义并触发事件。 |