HTML 页面的生命周期、HTML 事件

From：https://blog.csdn.net/WuLex/article/details/101016936

1、页面生命周期

HTML页面的生命周期有以下三个重要事件，每个事件都有特定的用途

• DOMContentLoaded ： 浏览器已经完全加载 HTML，DOM 树已经构建完毕，js 可以访问所有DOM节点，初始化界面。但是像是 <img> 和 样式表 等外部资源可能并没有下载完毕。
• load ： 浏览器已经加载了所有的资源( 图像，样式表等 )。可以在此事件触发时获得图像的大小( 如果没有被在 HTML/CSS 中指定 )
• beforeunload / unload ： 当用户离开页面的时候触发。( 可以询问用户是否保存了更改以及是否确定要离开页面。 )

1.1 DOMContentLoaded

DOMContentLoaded 由 document 对象触发。可以使用 addEventListener 来监听它：

document.addEventListener("DOMContentLoaded", ready);

举个例子

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

在这个例子中 DOMContentLoaded 在 document 加载完成后就被触发，无需等待其他资源的载入，所以 alert 输出的图像的大小为 0。这么看来 DOMContentLoaded 似乎很简单，DOM 树构建完毕之后就运行该事件，不过其实存在一些陷阱。就是一些 <img> 和 样式表 等外部资源可能并没有下载完毕。

DOMContentLoaded 和 Javascript

当浏览器在解析 HTML 页面时遇到了 <script>...</script> 标签，将无法继续构建DOM树(译注："UI渲染线程" 与 "JS引擎" 是 互斥的，当 JS引擎执行时UI线程会被挂起)，必须立即执行脚本。所以 DOMContentLoaded 有可能在所有脚本执行完毕后触发。

外部脚本 ( 带src的 ) 的加载和解析也会暂停 DOM 树构建，所以 DOMContentLoaded 也会等待外部脚本。

script 中 defer 与 async 的异同

• 共同点：两者都告诉浏览器可以继续处理页面，并在“后台”加载脚本，然后在加载时运行脚本。因此脚本不会阻止DOM构建和页面呈现。
• 不同点：如果一个页面中有多个带有defer修饰符的script标签，它们会按照顺序进行加载并且在DOMContentLoaded之前执行；async修饰符则不会遵循顺序，它什么时候加载完成什么时候执行(有可能在DOMContentLoaded之前，也有可能在DOMContentLoaded之后)。
• 使用场景：defer一般用在脚本相互依赖性的时候，能保证执行顺序；而async比较适用于完全独立的脚本。

不过有两个例外是带 async 和 defer 的外部脚本，他们告诉浏览器继续解析而不需要等待脚本的执行，所以用户可以在脚本加载完成前可以看到页面，有较好的用户体验。async 和 defer 属性仅仅对外部脚本起作用，并且他们在 src 不存在时会被自动忽略。它们都告诉浏览器继续处理页面上的内容同时在后台加载脚本，当脚本加载完毕后再执行。所以脚本不会阻塞DOM树的构建和页面的渲染。( 译注：其实这里是不对的，带有 async 和 defer 的脚本的下载是和 HTML 的下载与解析是异步的，但是 js 的执行一定是和 UI线程 是互斥的，像下面这张图所示，async 在下载完毕后的执行会阻塞 HTML 的解析 )

 他们有两处不同：

	async	defer
顺序	带有 async 的脚本是优先执行先加载完的脚本，他们在页面中的顺序并不影响他们执行的顺序。	带有defer的脚本按照他们在页面中出现的顺序依次执行。
DOMContentLoaded	带有async的脚本也许会在页面没有完全下载完之前就加载，这种情况会在脚本很小或本缓存，并且页面很大的情况下发生。	带有defer的脚本会在页面加载和解析完毕后执行，刚好在DOMContentLoaded之前执行。

所以 async 用在那些完全不依赖其他脚本的脚本上。

DOMContentLoaded 与 CSS(样式表)

外部样式表并不会影响 DOM，所以 DOMContentLoaded 并不会被他们阻塞。

不过仍然有一个陷阱：如果在样式后面有一个内联脚本，那么脚本必须等待样式先加载完。

( 译注：简单来说，JS 因为有可能会去获取 DOM 的样式，所以 JS 会等待样式表加载完毕，而 JS 是阻塞 DOM 的解析的，所以在有外部样式表的时候，JS 会一直阻塞到外部样式表下载完毕 )

<link type="text/css" rel="stylesheet" href="style.css">
<script>
  // the script doesn't not execute until the stylesheet is loaded
  // 脚本直到样式表加载完毕后才会执行。
  alert(getComputedStyle(document.body).marginTop);
</script>

发生这种事的原因是脚本也许会像上面的例子中所示，去得到一些元素的坐标或者基于样式的属性。所以他们自然要等到样式加载完毕才可以执行。上面示例中：DOMContentLoaded 需要等待脚本的执行，脚本又需要等待样式的加载。

浏览器的自动补全

Firefox、Chrome 和 Opera 会在 DOMContentLoaded 执行时自动补全表单。例如，如果页面有登录的界面，浏览器记住了该页面的用户名和密码，那么在 DOMContentLoaded 运行的时候浏览器会试图自动补全表单(如果用户设置允许)。

所以如果 DOMContentLoaded 被一个需要长时间执行的脚本阻塞，那么自动补全也会等待。你也许见过某些网站(如果你的浏览器开启了自动补全)--- 浏览器并不会立刻补全登录项，而是等到整个页面加载完毕后才填充。这就是因为在等待DOMContentLoaded事件。

defer 是会阻塞 DOMContentLoaded 的，被 defer 的脚本要在DOMContentLoaded 触发前执行，所以如果HTML很快就加载完了(先不考虑 CSS 阻塞 DOMContentLoaded 的情况)，而 defer 的脚本还没有加载完，浏览器就会等，等到脚本加载完，执行完，再触发 DOMContentLoaded，放上一张图(取自在 devTool 下分析自己写的一个页面)

HTML很快就加载和解析完毕(CSS 在这里是动态加载的，不阻塞 DOMContentLoaded)，jQuery 和main.js 的脚本是 defer 的， DOMContentLoaded(蓝线)一直在等，等到这两个脚本下载完并执行完，才触发了 DOMContentLoaded。从这个角度看来，defer 和把脚本放在 </body> 前真是没啥区别，只不过 defer 脚本位 于head 中，更早被读到，加载更早，而且不担心会被其他的脚本推迟下载开始的时间。

document.readyState

如果在整个页面加载完毕后设置 DOMContentLoaded 会发生什么呢？啥也没有，DOMContentLoaded不会被触发。

有一些情况我们无法确定页面上是否已经加载完毕，比如一个带有async的外部脚本的加载和执行是异步的(注：执行并不是异步的-_-)。在不同的网络状况下，脚本有可能是在页面加载完毕后执行也有可能是在页面加载完毕前执行，我们无法确定。所以我们需要知道页面加载的状况。

document.readyState 属性给了我们加载的信息，有三个可能的值：

• loading 加载 - document仍在加载。
• interactive 互动 - 文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
• complete - 文档和所有子资源已完成加载。状态表示 load 事件即将被触发。

所以可以检查 document.readyState 的状态，如果没有就绪可以选择挂载事件，如果已经就绪了就可以直接立即执行。像这样：

function work() { /*...*/ }

if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', work);
} else {
  work();
}

每当文档的加载状态改变的时候就有一个 readystatechange 事件被触发，所以我们可以打印所有的状态。

// current state
console.log(document.readyState);

// print state changes
document.addEventListener('readystatechange', () => console.log(document.readyState));

readystatechange 是追踪页面加载的一个可选的方法，很早之前就已经出现了。不过现在很少被使用了，为了保持完整性还是介绍一下它。

readystatechange 的在各个事件中的执行顺序又是如何呢？

<script>
  function log(text) { /* output the time and message */ }
  log('initial readyState:' + document.readyState);

  document.addEventListener('readystatechange', () => log('readyState:' + document.readyState));
  document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded'));

  window.onload = () => log('window onload');
</script>

<iframe src="iframe.html" onload="log('iframe onload')"></iframe>

<img src="http://en.js.cx/clipart/train.gif" id="img">
<script>
  img.onload = () => log('img onload');
</script>

输出如下:

[1] initial readyState:loading
    [2] readyState:interactive
    [2] DOMContentLoaded
    [3] iframe onload
    [4] readyState:complete
    [4] img onload
    [4] window onload

方括号中的数字表示他们发生的时间，真实的发生时间会更晚一点，不过相同数字的时间可以认为是在同一时刻被按顺序触发(误差在几毫秒之内)

• document.readyState 在DOMContentLoaded前一刻变为interactive，这两个事件可以认为是同时发生。
• document.readyState在所有资源加载完毕后(包括iframe和img)变成complete，我们可以看到complete、img.onload和window.onload几乎同时发生，区别就是window.onload在所有其他的load事件之后执行。

1.2 window.onload

window 对象上的 onload 事件在所有文件，包括 样式表，图片和其他资源下载完毕后触发。

下面的例子正确检测了图片的大小，因为 window.onload 会等待所有图片的加载。

<script>
  window.onload = function() {
    alert('Page loaded');

    // image is loaded at this time
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  };
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

1.3 onbeforeunload / onunload

window.onunload

用户离开页面的时候，window对象上的 unload 事件会被触发，我们可以做一些不存在延迟的事情，比如关闭弹出的窗口，可是我们无法阻止用户转移到另一个页面上。

所以我们需要使用另一个事件 — onbeforeunload。

window.onbeforeunload

如果用户即将离开页面或者关闭窗口时，beforeunload事件将会被触发以进行额外的确认。

浏览器将显示返回的字符串，举个例子：

window.onbeforeunload = function() {
  return "There are unsaved changes. Leave now?";
};

有些浏览器像 Chrome 和火狐会忽略返回的字符串取而代之显示浏览器自身的文本，这是为了安全考虑，来保证用户不受到错误信息的误导。

1.4 示例：

示例代码：

 

 执行顺序
    1.alert(“outside.”);
    2.alert(“inline.”);
    3.alert(getComputedStyle(document.body).width);
    4.alert(“defer.”);
    5.readyState:interactive；
    6.alert(“DOM ready!”);
    7.readyState:interactive；
    8.alert(“load!”);
    9.alert(“beforeunload!”);
    10.alert(“unload!”);
*** alert(“async”)在什么时候执行？
有可能在alert(“defer.”)之前或之后，也有可能在alert(“DOM ready!”)之前或之后。

动态加载 script

动态 script 的默认行为是 async

• 1.异步，不会阻塞渲染；
• 2.先加载完成，先运行。

在 DOMContentLoaded 中访问 img 属性

*** DOMContentLoaded不会等待img加载完成，建议不要在DOMContentLoaded中访问img的相关属性。

外部样式是否会阻塞 DOMContentLoaded 的执行？

• 1. 一般情况，外部样式不会阻塞 DOMContentLoaded的执行；
• 2. 如果外部样式表后有script脚本访问样式属性，则会阻塞script脚本的执行(script脚本会等待外部样式加载完成后执行)，从而会阻塞DOMContentLoaded的执行。

readyState

如果我们在加载文档之后监听DOMContentLoaded，它永远不会执行；在需要的时候，我们可以监听readystatechange事件，通过document.readyState来获得文档的当前状态。

document.readyState三态：

• loading ： 文档正在加载中
• interactive ： 文档已经准备完全好
• complete ： 文档和所有资源加载完成

 *** document.readyState:interactive与DOMContentLoaded相同；document.readyState:complete与window.onload相同。

1.5 总结

页面事件的生命周期：

• DOMContentLoaded事件在DOM树构建完毕后被触发，我们可以在这个阶段使用js去访问元素。
  • async和defer的脚本可能还没有执行。
  • 图片及其他资源文件可能还在下载中。
• load事件在页面所有资源被加载完毕后触发，通常我们不会用到这个事件，因为我们不需要等那么久。
• beforeunload在用户即将离开页面时触发，它返回一个字符串，浏览器会向用户展示并询问这个字符串以确定是否离开。
• unload在用户已经离开时触发，我们在这个阶段仅可以做一些没有延迟的操作，由于种种限制，很少被使用。
• document.readyState表征页面的加载状态，可以在readystatechange中追踪页面的变化状态：
  • loading — 页面正在加载中。
  • interactive – 页面解析完毕，时间上和 DOMContentLoaded同时发生，不过顺序在它之前。
  • complete – 页面上的资源都已加载完毕，时间上和window.onload同时发生，不过顺序在他之前。

html 常见的生命周期钩子

window.addEventListener('resize', function() {
    console.log('获取或设置当前窗口的resize事件的事件处理函数')
})

window.addEventListener('pageshow', function (e) {
    console.log('当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)')
    if (e.persisted) 
        console.log('网页来自缓存.')
})

document.onreadystatechange = function() {
    if (document.readyState == "loading")
        console.log('浏览器正在加载和处理此文档')
    if (document.readyState == "interactive")
        console.log('文档已被解析，但浏览器还在加载其中的链接资源(图像和媒体文件等)')
    if (document.readyState == "complete")
        console.log('文档已被解析，所有的资源也加载完毕')
}

document.addEventListener('DOMContentLoaded', function() {
    console.log('当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。')
})

window.addEventListener('load', function() {
    console.log('当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。它与DOMContentLoaded不同，后者只要页面DOM加载完成就触发，无需等待依赖资源的加载。')
})

3、HTML 事件参考手册

：https://www.w3school.com.cn/tags/html_ref_eventattributes.asp

全局事件属性

HTML 有能力让事件触发浏览器中的动作，例如当用户单击元素时启动 JavaScript。

如需了解有关编程事件的更多信息，请访问 JavaScript 教程。

以下是可添加到 HTML 元素以定义事件操作的全局事件属性。

Window 事件属性

针对 window 对象触发的事件(应用到 <body> 标签)：

属性	值	描述
onafterprint	script	文档打印之后运行的脚本。
onbeforeprint	script	文档打印之前运行的脚本。
onbeforeunload	script	文档卸载之前运行的脚本。
onerror	script	在错误发生时运行的脚本。
onhaschange	script	当文档已改变时运行的脚本。
onload	script	页面结束加载之后触发。
onmessage	script	在消息被触发时运行的脚本。
onoffline	script	当文档离线时运行的脚本。
ononline	script	当文档上线时运行的脚本。
onpagehide	script	当窗口隐藏时运行的脚本。
onpageshow	script	当窗口成为可见时运行的脚本。
onpopstate	script	当窗口历史记录改变时运行的脚本。
onredo	script	当文档执行撤销(redo)时运行的脚本。
onresize	script	当浏览器窗口被调整大小时触发。
onstorage	script	在 Web Storage 区域更新后运行的脚本。
onundo	script	在文档执行 undo 时运行的脚本。
onunload	script	一旦页面已下载时触发(或者浏览器窗口已被关闭)。

Form 事件

由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素，但最常用在 form 元素中)：

属性	值	描述
onblur	script	元素失去焦点时运行的脚本。
onchange	script	在元素值被改变时运行的脚本。
oncontextmenu	script	当上下文菜单被触发时运行的脚本。
onfocus	script	当元素获得焦点时运行的脚本。
onformchange	script	在表单改变时运行的脚本。
onforminput	script	当表单获得用户输入时运行的脚本。
oninput	script	当元素获得用户输入时运行的脚本。
oninvalid	script	当元素无效时运行的脚本。
onreset	script	当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect	script	在元素中文本被选中后触发。
onsubmit	script	在提交表单时触发。

Keyboard 事件

属性	值	描述
onkeydown	script	在用户按下按键时触发。
onkeypress	script	在用户敲击按钮时触发。
onkeyup	script	当用户释放按键时触发。

Mouse 事件

由鼠标或类似用户动作触发的事件：

属性	值	描述
onclick	script	元素上发生鼠标点击时触发。
ondblclick	script	元素上发生鼠标双击时触发。
ondrag	script	元素被拖动时运行的脚本。
ondragend	script	在拖动操作末端运行的脚本。
ondragenter	script	当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleave	script	当元素离开有效拖放目标时运行的脚本。
ondragover	script	当元素在有效拖放目标上正在被拖动时运行的脚本。
ondragstart	script	在拖动操作开端运行的脚本。
ondrop	script	当被拖元素正在被拖放时运行的脚本。
onmousedown	script	当元素上按下鼠标按钮时触发。
onmousemove	script	当鼠标指针移动到元素上时触发。
onmouseout	script	当鼠标指针移出元素时触发。
onmouseover	script	当鼠标指针移动到元素上时触发。
onmouseup	script	当在元素上释放鼠标按钮时触发。
onmousewheel	script	当鼠标滚轮正在被滚动时运行的脚本。
onscroll	script	当元素滚动条被滚动时运行的脚本。

Media 事件

由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>):

属性	值	描述
onabort	script	在退出时运行的脚本。
oncanplay	script	当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。
oncanplaythrough	script	当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange	script	当媒介长度改变时运行的脚本。
onemptied	script	当发生故障并且文件突然不可用时运行的脚本(比如连接意外断开时)。
onended	script	当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。
onerror	script	当在文件加载期间发生错误时运行的脚本。
onloadeddata	script	当媒介数据已加载时运行的脚本。
onloadedmetadata	script	当元数据(比如分辨率和时长)被加载时运行的脚本。
onloadstart	script	在文件开始加载且未实际加载任何数据前运行的脚本。
onpause	script	当媒介被用户或程序暂停时运行的脚本。
onplay	script	当媒介已就绪可以开始播放时运行的脚本。
onplaying	script	当媒介已开始播放时运行的脚本。
onprogress	script	当浏览器正在获取媒介数据时运行的脚本。
onratechange	script	每当回放速率改变时运行的脚本(比如当用户切换到慢动作或快进模式)。
onreadystatechange	script	每当就绪状态改变时运行的脚本(就绪状态监测媒介数据的状态)。
onseeked	script	当 seeking 属性设置为 false(指示定位已结束)时运行的脚本。
onseeking	script	当 seeking 属性设置为 true(指示定位是活动的)时运行的脚本。
onstalled	script	在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend	script	在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate	script	当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。
onvolumechange	script	每当音量改变时(包括将音量设置为静音)时运行的脚本。
onwaiting	script	当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本

4、HTML DOM 事件

：https://www.w3school.com.cn/jsref/dom_obj_event.asp

HTML DOM 事件

HTML DOM 事件允许 JavaScript 在 HTML 文档中的元素上注册不同的事件处理程序。

事件通常与函数结合使用，在事件发生之前函数不会被执行(例如当用户单击按钮时)。

如需有关事件的教程，请学习 JavaScript 事件教程。

事件	描述	属于
abort	媒体加载中止时发生该事件。	UiEvent Event
afterprint	当页面开始打印时，或者关闭打印对话框时，发生此事件。	Event
animationend	CSS 动画完成时发生此事件。	AnimationEvent
animationiteration	重复 CSS 动画时发生此事件。	AnimationEvent
animationstart	CSS 动画开始时发生此事件。	AnimationEvent
beforeprint	即将打印页面时发生此事件。	Event
beforeunload	在文档即将被卸载之前发生此事件。	UiEvent Event
blur	当元素失去焦点时发生此事件。	FocusEvent
canplay	当浏览器可以开始播放媒体时，发生此事件。	Event
canplaythrough	当浏览器可以在不停止缓冲的情况下播放媒体时发生此事件。	Event
change	当form元素的内容、选择的内容或选中的状态发生改变时，发生此事件	Event
click	当用户单击元素时发生此事件。	MouseEvent
contextmenu	当用户右键单击某个元素以打开上下文菜单时，发生此事件。	MouseEvent
copy	当用户复制元素的内容时发生此事件。	ClipboardEvent
cut	当用户剪切元素的内容时发生此事件。	ClipboardEvent
dblclick	当用户双击元素时发生此事件。	MouseEvent
drag	拖动元素时发生此事件。	DragEvent
dragend	当用户完成拖动元素后，发生此事件。	DragEvent
dragenter	当拖动的元素进入放置目标时，发生此事件。	DragEvent
dragleave	当拖动的元素离开放置目标时，发生此事件。	DragEvent
dragover	当拖动的元素位于放置目标之上时，发生此事件。	DragEvent
dragstart	当用户开始拖动元素时发生此事件。	DragEvent
drop	当将拖动的元素放置在放置目标上时，发生此事件。	DragEvent
durationchange	媒体时长改变时发生此事件。	Event
ended	在媒体播放到尽头时发生此事件。	Event
error	当加载外部文件时发生错误后，发生此事件。	ProgressEvent UiEvent Event
focus	在元素获得焦点时发生此事件。	FocusEvent
focusin	在元素即将获得焦点时发生此事件。	FocusEvent
focusout	在元素即将失去焦点时发生此事件。	FocusEvent
fullscreenchange	当元素以全屏模式显示时，发生此事件。	Event
fullscreenerror	当元素无法在全屏模式下显示时，发生此事件。	Event
hashchange	当 URL 的锚部分发生改变时，发生此事件。	HashChangeEvent
input	当元素获得用户输入时，发生此事件。	InputEvent Event
invalid	当元素无效时，发生此事件。	Event
keydown	当用户正在按下键时，发生此事件。	KeyboardEvent
keypress	当用户按下键时，发生此事件。	KeyboardEvent
keyup	当用户松开键时，发生此事件。	KeyboardEvent
load	在对象已加载时，发生此事件。	UiEvent Event
loadeddata	媒体数据加载后，发生此事件。	Event
loadedmetadata	加载元数据(比如尺寸和持续时间)时，发生此事件。	Event
loadstart	当浏览器开始查找指定的媒体时，发生此事件。	ProgressEvent
message	在通过此事件源接收消息时，发生此事件。	Event
mousedown	当用户在元素上按下鼠标按钮时，发生此事件。	MouseEvent
mouseenter	当指针移动到元素上时，发生此事件。	MouseEvent
mouseleave	当指针从元素上移出时，发生此事件。	MouseEvent
mousemove	当指针在元素上方移动时，发生此事件。	MouseEvent
mouseout	当用户将鼠标指针移出元素或其中的子元素时，发生此事件。	MouseEvent
mouseover	当指针移动到元素或其中的子元素上时，发生此事件。	MouseEvent
mouseup	当用户在元素上释放鼠标按钮时，发生此事件。	MouseEvent
mousewheel	不推荐使用。请改用 wheel 事件。	WheelEvent
offline	当浏览器开始脱机工作时，发生此事件。	Event
online	当浏览器开始在线工作时，发生此事件。	Event
open	当打开与事件源的连接时，发生此事件。	Event
pagehide	当用户离开某张网页进行导航时，发生此事件。	PageTransitionEvent
pageshow	在用户导航到某张网页时，发生此事件。	PageTransitionEvent
paste	当用户将一些内容粘贴到元素中时，发生此事件。	ClipboardEvent
pause	当媒体被用户暂停或以编程方式暂停时，发生此事件。	Event
play	当媒体已启动或不再暂停时，发生此事件。	Event
playing	在媒体被暂停或停止以缓冲后播放时，发生此事件。	Event
popstate	窗口的历史记录改变时，发生此事件。	PopStateEvent
progress	当浏览器正处于获得媒体数据的过程中时，发生此事件。	Event
ratechange	媒体播放速度改变时发生此事件。	Event
reset	重置表单时发生此事件。	Event
resize	调整文档视图的大小时发生此事件。	UiEvent Event
scroll	滚动元素的滚动条时发生此事件。	UiEvent Event
search	当用户在搜索字段中输入内容时，发生此事件。	Event
seeked	当用户完成移动/跳到媒体中的新位置时，发生该事件。	Event
seeking	当用户开始移动/跳到媒体中的新位置时，发生该事件。	Event
select	用户选择文本后(对于<input>和<textarea>)发生此事件	UiEvent Event
show	当 <menu> 元素显示为上下文菜单时，发生此事件。	Event
stalled	当浏览器尝试获取媒体数据但数据不可用时，发生此事件。	Event
storage	Web 存储区域更新时发生此事件。	StorageEvent
submit	在提交表单时发生此事件。	Event
suspend	当浏览器有意不获取媒体数据时，发生此事件。	Event
timeupdate	当播放位置更改时发生此事件。	Event
toggle	当用户打开或关闭 <details> 元素时，发生此事件。	Event
touchcancel	在触摸被中断时，发生此事件。	TouchEvent
touchend	当手指从触摸屏上移开时，发生此事件。	TouchEvent
touchmove	当手指在屏幕上拖动时，发生此事件。	TouchEvent
touchstart	当手指放在触摸屏上时，发生此事件。	TouchEvent
transitionend	CSS 转换完成时，发生此事件。	TransitionEvent
unload	页面卸载后(对于 <body>)，发生此事件。	UiEvent Event
volumechange	当媒体的音量已更改时，发生此事件。	Event
waiting	当媒体已暂停但预期会恢复时，发生此事件。	Event
wheel	当鼠标滚轮在元素向上或向下滚动时，发生此事件。	WheelEvent

HTML DOM 事件属性和方法

属性/方法	描述	属于
altKey	返回触发鼠标事件时是否按下了 "ALT" 键。	MouseEvent
altKey	返回触发按键事件时是否按下了 "ALT" 键。	KeyboardEvent TouchEvent
animationName	返回动画的名称。	AnimationEvent
bubbles	返回特定事件是否为冒泡事件。	Event
button	返回触发鼠标事件时按下的鼠标按钮。	MouseEvent
buttons	返回触发鼠标事件时按下的鼠标按钮。	MouseEvent
cancelBubble	设置或返回事件是否应该向上层级进行传播。
cancelable	返回事件是否可以阻止其默认操作。	Event
changeTouches	返回在上一触摸与该触摸之间其状态已更改的所有触摸对象的列表	TouchEvent
charCode	返回触发 onkeypress 事件的键的 Unicode 字符代码。	KeyboardEvent
clientX	返回触发鼠标事件时，鼠标指针相对于当前窗口的水平坐标。	MouseEvent TouchEvent
clientY	返回触发鼠标事件时，鼠标指针相对于当前窗口的垂直坐标。	MouseEvent TouchEvent
clipboardData	返回对象，其中包含受剪贴板操作影响的数据。	ClipboardData
code	返回触发事件的键的代码。	KeyboardEvent
composed	指示该事件是否可以从 Shadow DOM 传递到一般的 DOM。	Event
composedPath()	返回事件的路径。
createEvent()	创建新事件。	Event
ctrlKey	返回触发鼠标事件时是否按下了 "CTRL" 键。	MouseEvent
ctrlKey	返回按键鼠标事件时是否按下了 "CTRL" 键。	KeyboardEvent TouchEvent
currentTarget	返回其事件侦听器触发事件的元素。	Event
data	返回插入的字符。	InputEvent
dataTransfer	返回一个对象，其中包含被拖放或插入/删除的数据。	DragEvent InputEvent
defaultPrevented	返回是否为事件调用 preventDefault() 方法。	Event
deltaX	返回鼠标滚轮的水平滚动量(x 轴)。	WheelEvent
deltaY	返回鼠标滚轮的垂直滚动量(y 轴)。	WheelEvent
deltaZ	返回鼠标滚轮的 Z 轴滚动量。	WheelEvent
deltaMode	返回数字，代表增量值(像素、线或页面)的度量单位。	WheelEvent
detail	返回数字，指示鼠标被单击了多少次。	UiEvent
elapsedTime	返回动画已运行的秒数。	AnimationEvent
elapsedTime	返回过渡已运行的秒数。
eventPhase	返回当前正在评估事件流处于哪个阶段。	Event
getModifierState()	返回包含目标范围的数组，此范围将受到插入/删除的影响。	MouseEvent
getTargetRanges()	返回包含目标范围的数组，此范围将受到插入/删除的影响。	InputEvent
inputType	返回更改的类型(即 "inserting" 或 "deleting")。	InputEvent
isComposing	返回事件的状态是否正在构成。	InputEvent KeyboardEvent
isTrusted	返回事件是否受信任。	Event
key	返回事件表示的键的键值。	KeyboardEvent
key	返回更改后的存储项的键。	StorageEvent
keyCode	返回触发 onkeypress、onkeydown 或 onkeyup 事件的键的 Unicode 字符代码。	KeyboardEvent
location	返回键盘或设备上按键的位置。	KeyboardEvent
lengthComputable	返回进度的长度是否可计算。	ProgressEvent
loaded	返回已加载的工作量。	ProgressEvent
metaKey	返回事件触发时是否按下了 "META" 键。	MouseEvent
metaKey	返回按键事件触发时是否按下了 "META" 键。	KeyboardEvent TouchEvent
MovementX	返回相对于上一 mousemove 事件的位置的鼠标指针的水平坐标	MouseEvent
MovementY	返回相对于上一 mousemove 事件的位置的鼠标指针的垂直坐标	MouseEvent
newURL	返回更改 hash 后的文档 URL。	HasChangeEvent
newValue	返回更改后的存储项目的新值。	StorageEvent
offsetX	返回鼠标指针相对于目标元素边缘位置的水平坐标。	MouseEvent
offsetY	返回鼠标指针相对于目标元素边缘位置的垂直坐标。	MouseEvent
oldURL	返回更改 hash 前的文档 URL。	HasChangeEvent
oldValue	返回更改后的存储项目的旧值。	StorageEvent
onemptied	当发生不良情况且媒体文件突然不可用时，发生此事件。
pageX	返回触发鼠标事件时鼠标指针相对于文档的水平坐标。	MouseEvent
pageY	返回触发鼠标事件时鼠标指针相对于文档的垂直坐标。	MouseEvent
persisted	返回网页是否被浏览器缓存。	PageTransitionEvent
preventDefault()	如果可以取消事件，则将其取消，不执行属于该事件的默认操作。	Event
propertyName	返回与动画或过渡相关联的 CSS 属性的名称。	AnimationEvent TransitionEvent
pseudoElement	返回动画或过渡的伪元素的名称。	AnimationEvent TransitionEvent
region		MouseEvent
relatedTarget	返回与触发鼠标事件的元素相关的元素。	MouseEvent
relatedTarget	返回与触发事件的元素相关的元素。	FocusEvent
repeat	返回是否重复按住某个键。	KeyboardEvent
screenX	返回窗口/鼠标指针相对于屏幕的水平坐标。	MouseEvent
screenY	返回窗口/鼠标指针相对于屏幕的垂直坐标。	MouseEvent
shiftKey	返回事件触发时是否按下了 "SHIFT" 键。	MouseEvent
shiftKey	返回按键事件触发时是否按下了 "SHIFT" 键。	KeyboardEvent TouchEvent
state	返回包含历史记录条目副本的对象。	PopStateEvent
stopImme...()	防止同一事件的其他侦听器被调用。	Event
stopPropagation()	防止事件在事件流中进一步传播。	Event
storageArea	返回代表受影响的存储对象的对象。	StorageEvent
target	返回触发事件的元素。	Event
targetTouches	返回包含仍与触摸面接触的所有触摸点的Touch对象的TouchList列表	TouchEvent
timeStamp	返回创建事件的时间(相对于纪元的毫秒数)。	Event
total	返回将要加载的工作总量。	ProgressEvent
touches	返回当前与表面接触的所有 touch 对象的列表。	TouchEvent
type	返回事件名称。	Event
url	返回已更改项目的所在文档的 URL。	StorageEvent
which	返回触发鼠标事件时按下的鼠标按钮。	MouseEvent
which	返回触发 onkeypress 事件的键的 Unicode 字符码，或触发 onkeydown 或 onkeyup 事件的键的 Unicode 键码	KeyboardEvent
view	返回对发生事件的 Window 对象的引用。	UiEvent