在线建网站,千瓜数据,网站前台设计工具,网页设计的概念和特点From#xff1a;https://blog.csdn.net/WuLex/article/details/101016936 1、页面生命周期 HTML页面的生命周期有以下三个重要事件#xff0c;每个事件都有特定的用途
DOMContentLoaded #xff1a; 浏览器已经完全加载 HTML#xff0c;DOM 树已经构建完毕#xff0c;js …
Fromhttps://blog.csdn.net/WuLex/article/details/101016936 1、页面生命周期 HTML页面的生命周期有以下三个重要事件每个事件都有特定的用途
DOMContentLoaded 浏览器已经完全加载 HTMLDOM 树已经构建完毕js 可以访问所有DOM节点初始化界面。但是像是 img 和 样式表 等外部资源可能并没有下载完毕。load 浏览器已经加载了所有的资源 图像样式表等 。可以在此事件触发时获得图像的大小 如果没有被在 HTML/CSS 中指定 beforeunload / unload 当用户离开页面的时候触发。( 可以询问用户是否保存了更改以及是否确定要离开页面。 )1.1 DOMContentLoaded
DOMContentLoaded 由 document 对象触发。可以使用 addEventListener 来监听它 document.addEventListener(DOMContentLoaded, ready);
举个例子
scriptfunction ready() {alert(DOM is ready);// image is not yet loaded (unless was cached), so the size is 0x0alert(Image size: ${img.offsetWidth}x${img.offsetHeight});}document.addEventListener(DOMContentLoaded, ready);
/scriptimg idimg srchttps://en.js.cx/clipart/train.gif?speed1cache0在这个例子中 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 的解析 ) 他们有两处不同
asyncdefer顺序带有 async 的脚本是优先执行先加载完的脚本他们在页面中的顺序并不影响他们执行的顺序。带有defer的脚本按照他们在页面中出现的顺序依次执行。DOMContentLoaded带有async的脚本也许会在页面没有完全下载完之前就加载这种情况会在脚本很小或本缓存并且页面很大的情况下发生。带有defer的脚本会在页面加载和解析完毕后执行刚好在DOMContentLoaded之前执行。
所以 async 用在那些完全不依赖其他脚本的脚本上。 DOMContentLoaded 与 CSS(样式表)
外部样式表并不会影响 DOM所以 DOMContentLoaded 并不会被他们阻塞。
不过仍然有一个陷阱如果在样式后面有一个内联脚本那么脚本必须等待样式先加载完。
( 译注简单来说JS 因为有可能会去获取 DOM 的样式所以 JS 会等待样式表加载完毕而 JS 是阻塞 DOM 的解析的所以在有外部样式表的时候JS 会一直阻塞到外部样式表下载完毕 )
link typetext/css relstylesheet hrefstyle.css
script// the script doesnt 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 在这里是动态加载的不阻塞 DOMContentLoadedjQuery 和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 的在各个事件中的执行顺序又是如何呢
scriptfunction 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);
/scriptiframe srciframe.html onloadlog(iframe onload)/iframeimg srchttp://en.js.cx/clipart/train.gif idimg
scriptimg.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 会等待所有图片的加载。
scriptwindow.onload function() {alert(Page loaded);// image is loaded at this timealert(Image size: ${img.offsetWidth}x${img.offsetHeight});};
/scriptimg idimg srchttps://en.js.cx/clipart/train.gif?speed1cache01.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 标签
属性值描述onafterprintscript文档打印之后运行的脚本。onbeforeprintscript文档打印之前运行的脚本。onbeforeunloadscript文档卸载之前运行的脚本。onerrorscript在错误发生时运行的脚本。onhaschangescript当文档已改变时运行的脚本。onloadscript页面结束加载之后触发。onmessagescript在消息被触发时运行的脚本。onofflinescript当文档离线时运行的脚本。ononlinescript当文档上线时运行的脚本。onpagehidescript当窗口隐藏时运行的脚本。onpageshowscript当窗口成为可见时运行的脚本。onpopstatescript当窗口历史记录改变时运行的脚本。onredoscript当文档执行撤销redo时运行的脚本。onresizescript当浏览器窗口被调整大小时触发。onstoragescript在 Web Storage 区域更新后运行的脚本。onundoscript在文档执行 undo 时运行的脚本。onunloadscript一旦页面已下载时触发或者浏览器窗口已被关闭。
Form 事件
由 HTML 表单内的动作触发的事件应用到几乎所有 HTML 元素但最常用在 form 元素中
属性值描述onblurscript元素失去焦点时运行的脚本。onchangescript在元素值被改变时运行的脚本。oncontextmenuscript当上下文菜单被触发时运行的脚本。onfocusscript当元素获得焦点时运行的脚本。onformchangescript在表单改变时运行的脚本。onforminputscript当表单获得用户输入时运行的脚本。oninputscript当元素获得用户输入时运行的脚本。oninvalidscript当元素无效时运行的脚本。onresetscript当表单中的重置按钮被点击时触发。HTML5 中不支持。onselectscript在元素中文本被选中后触发。onsubmitscript在提交表单时触发。
Keyboard 事件
属性值描述onkeydownscript在用户按下按键时触发。onkeypressscript在用户敲击按钮时触发。onkeyupscript当用户释放按键时触发。
Mouse 事件
由鼠标或类似用户动作触发的事件
属性值描述onclickscript元素上发生鼠标点击时触发。ondblclickscript元素上发生鼠标双击时触发。ondragscript元素被拖动时运行的脚本。ondragendscript在拖动操作末端运行的脚本。ondragenterscript当元素元素已被拖动到有效拖放区域时运行的脚本。ondragleavescript当元素离开有效拖放目标时运行的脚本。ondragoverscript当元素在有效拖放目标上正在被拖动时运行的脚本。ondragstartscript在拖动操作开端运行的脚本。ondropscript当被拖元素正在被拖放时运行的脚本。onmousedownscript当元素上按下鼠标按钮时触发。onmousemovescript当鼠标指针移动到元素上时触发。onmouseoutscript当鼠标指针移出元素时触发。onmouseoverscript当鼠标指针移动到元素上时触发。onmouseupscript当在元素上释放鼠标按钮时触发。onmousewheelscript当鼠标滚轮正在被滚动时运行的脚本。onscrollscript当元素滚动条被滚动时运行的脚本。
Media 事件
由媒介比如视频、图像和音频触发的事件适用于所有 HTML 元素但常见于媒介元素中比如 audio、embed、img、object 以及 video:
属性值描述onabortscript在退出时运行的脚本。oncanplayscript当文件就绪可以开始播放时运行的脚本缓冲已足够开始时。oncanplaythroughscript当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。ondurationchangescript当媒介长度改变时运行的脚本。onemptiedscript当发生故障并且文件突然不可用时运行的脚本比如连接意外断开时。onendedscript当媒介已到达结尾时运行的脚本可发送类似“感谢观看”之类的消息。onerrorscript当在文件加载期间发生错误时运行的脚本。onloadeddatascript当媒介数据已加载时运行的脚本。onloadedmetadatascript当元数据比如分辨率和时长被加载时运行的脚本。onloadstartscript在文件开始加载且未实际加载任何数据前运行的脚本。onpausescript当媒介被用户或程序暂停时运行的脚本。onplayscript当媒介已就绪可以开始播放时运行的脚本。onplayingscript当媒介已开始播放时运行的脚本。onprogressscript当浏览器正在获取媒介数据时运行的脚本。onratechangescript每当回放速率改变时运行的脚本比如当用户切换到慢动作或快进模式。onreadystatechangescript每当就绪状态改变时运行的脚本就绪状态监测媒介数据的状态。onseekedscript当 seeking 属性设置为 false指示定位已结束时运行的脚本。onseekingscript当 seeking 属性设置为 true指示定位是活动的时运行的脚本。onstalledscript在浏览器不论何种原因未能取回媒介数据时运行的脚本。onsuspendscript在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。ontimeupdatescript当播放位置改变时比如当用户快进到媒介中一个不同的位置时运行的脚本。onvolumechangescript每当音量改变时包括将音量设置为静音时运行的脚本。onwaitingscript当媒介已停止播放但打算继续播放时比如当媒介暂停已缓冲更多数据运行脚本4、HTML DOM 事件 https://www.w3school.com.cn/jsref/dom_obj_event.asp HTML DOM 事件 HTML DOM 事件允许 JavaScript 在 HTML 文档中的元素上注册不同的事件处理程序。 事件通常与函数结合使用在事件发生之前函数不会被执行例如当用户单击按钮时。 如需有关事件的教程请学习 JavaScript 事件教程。
事件描述属于abort媒体加载中止时发生该事件。 UiEventEventafterprint当页面开始打印时或者关闭打印对话框时发生此事件。EventanimationendCSS 动画完成时发生此事件。AnimationEventanimationiteration重复 CSS 动画时发生此事件。AnimationEventanimationstartCSS 动画开始时发生此事件。AnimationEventbeforeprint即将打印页面时发生此事件。Eventbeforeunload在文档即将被卸载之前发生此事件。 UiEventEventblur当元素失去焦点时发生此事件。FocusEventcanplay当浏览器可以开始播放媒体时发生此事件。Eventcanplaythrough当浏览器可以在不停止缓冲的情况下播放媒体时发生此事件。Eventchange当form元素的内容、选择的内容或选中的状态发生改变时发生此事件Eventclick当用户单击元素时发生此事件。MouseEventcontextmenu当用户右键单击某个元素以打开上下文菜单时发生此事件。MouseEventcopy当用户复制元素的内容时发生此事件。ClipboardEventcut当用户剪切元素的内容时发生此事件。ClipboardEventdblclick当用户双击元素时发生此事件。MouseEventdrag拖动元素时发生此事件。DragEventdragend当用户完成拖动元素后发生此事件。DragEventdragenter当拖动的元素进入放置目标时发生此事件。DragEventdragleave当拖动的元素离开放置目标时发生此事件。DragEventdragover当拖动的元素位于放置目标之上时发生此事件。DragEventdragstart当用户开始拖动元素时发生此事件。DragEventdrop当将拖动的元素放置在放置目标上时发生此事件。DragEventdurationchange媒体时长改变时发生此事件。Eventended在媒体播放到尽头时发生此事件。Eventerror当加载外部文件时发生错误后发生此事件。 ProgressEventUiEventEventfocus在元素获得焦点时发生此事件。FocusEventfocusin在元素即将获得焦点时发生此事件。FocusEventfocusout在元素即将失去焦点时发生此事件。FocusEventfullscreenchange当元素以全屏模式显示时发生此事件。Eventfullscreenerror当元素无法在全屏模式下显示时发生此事件。Eventhashchange当 URL 的锚部分发生改变时发生此事件。HashChangeEventinput当元素获得用户输入时发生此事件。 InputEventEventinvalid当元素无效时发生此事件。Eventkeydown当用户正在按下键时发生此事件。KeyboardEventkeypress当用户按下键时发生此事件。KeyboardEventkeyup当用户松开键时发生此事件。KeyboardEventload在对象已加载时发生此事件。 UiEventEventloadeddata媒体数据加载后发生此事件。Eventloadedmetadata加载元数据比如尺寸和持续时间时发生此事件。Eventloadstart当浏览器开始查找指定的媒体时发生此事件。ProgressEventmessage在通过此事件源接收消息时发生此事件。Eventmousedown当用户在元素上按下鼠标按钮时发生此事件。MouseEventmouseenter当指针移动到元素上时发生此事件。MouseEventmouseleave当指针从元素上移出时发生此事件。MouseEventmousemove当指针在元素上方移动时发生此事件。MouseEventmouseout当用户将鼠标指针移出元素或其中的子元素时发生此事件。MouseEventmouseover当指针移动到元素或其中的子元素上时发生此事件。MouseEventmouseup当用户在元素上释放鼠标按钮时发生此事件。MouseEventmousewheel不推荐使用。请改用 wheel 事件。WheelEventoffline当浏览器开始脱机工作时发生此事件。Eventonline当浏览器开始在线工作时发生此事件。Eventopen当打开与事件源的连接时发生此事件。Eventpagehide当用户离开某张网页进行导航时发生此事件。PageTransitionEventpageshow在用户导航到某张网页时发生此事件。PageTransitionEventpaste当用户将一些内容粘贴到元素中时发生此事件。ClipboardEventpause当媒体被用户暂停或以编程方式暂停时发生此事件。Eventplay当媒体已启动或不再暂停时发生此事件。Eventplaying在媒体被暂停或停止以缓冲后播放时发生此事件。Eventpopstate窗口的历史记录改变时发生此事件。PopStateEventprogress当浏览器正处于获得媒体数据的过程中时发生此事件。Eventratechange媒体播放速度改变时发生此事件。Eventreset重置表单时发生此事件。Eventresize调整文档视图的大小时发生此事件。 UiEventEventscroll滚动元素的滚动条时发生此事件。 UiEventEventsearch当用户在搜索字段中输入内容时发生此事件。Eventseeked当用户完成移动/跳到媒体中的新位置时发生该事件。Eventseeking当用户开始移动/跳到媒体中的新位置时发生该事件。Eventselect用户选择文本后对于input和textarea发生此事件 UiEventEventshow当 menu 元素显示为上下文菜单时发生此事件。Eventstalled当浏览器尝试获取媒体数据但数据不可用时发生此事件。EventstorageWeb 存储区域更新时发生此事件。StorageEventsubmit在提交表单时发生此事件。Eventsuspend当浏览器有意不获取媒体数据时发生此事件。Eventtimeupdate当播放位置更改时发生此事件。Eventtoggle当用户打开或关闭 details 元素时发生此事件。Eventtouchcancel在触摸被中断时发生此事件。TouchEventtouchend当手指从触摸屏上移开时发生此事件。TouchEventtouchmove当手指在屏幕上拖动时发生此事件。TouchEventtouchstart当手指放在触摸屏上时发生此事件。TouchEventtransitionendCSS 转换完成时发生此事件。TransitionEventunload页面卸载后对于 body发生此事件。 UiEventEventvolumechange当媒体的音量已更改时发生此事件。Eventwaiting当媒体已暂停但预期会恢复时发生此事件。Eventwheel当鼠标滚轮在元素向上或向下滚动时发生此事件。WheelEvent
HTML DOM 事件属性和方法
属性/方法描述属于altKey返回触发鼠标事件时是否按下了 ALT 键。MouseEventaltKey返回触发按键事件时是否按下了 ALT 键。 KeyboardEventTouchEventanimationName返回动画的名称。AnimationEventbubbles返回特定事件是否为冒泡事件。Eventbutton返回触发鼠标事件时按下的鼠标按钮。MouseEventbuttons返回触发鼠标事件时按下的鼠标按钮。MouseEventcancelBubble设置或返回事件是否应该向上层级进行传播。cancelable返回事件是否可以阻止其默认操作。EventchangeTouches返回在上一触摸与该触摸之间其状态已更改的所有触摸对象的列表TouchEventcharCode返回触发 onkeypress 事件的键的 Unicode 字符代码。KeyboardEventclientX返回触发鼠标事件时鼠标指针相对于当前窗口的水平坐标。 MouseEventTouchEventclientY返回触发鼠标事件时鼠标指针相对于当前窗口的垂直坐标。 MouseEventTouchEventclipboardData返回对象其中包含受剪贴板操作影响的数据。ClipboardDatacode返回触发事件的键的代码。KeyboardEventcomposed指示该事件是否可以从 Shadow DOM 传递到一般的 DOM。EventcomposedPath()返回事件的路径。createEvent()创建新事件。EventctrlKey返回触发鼠标事件时是否按下了 CTRL 键。MouseEventctrlKey返回按键鼠标事件时是否按下了 CTRL 键。 KeyboardEventTouchEventcurrentTarget返回其事件侦听器触发事件的元素。Eventdata返回插入的字符。InputEventdataTransfer返回一个对象其中包含被拖放或插入/删除的数据。 DragEventInputEventdefaultPrevented返回是否为事件调用 preventDefault() 方法。EventdeltaX返回鼠标滚轮的水平滚动量x 轴。WheelEventdeltaY返回鼠标滚轮的垂直滚动量y 轴。WheelEventdeltaZ返回鼠标滚轮的 Z 轴滚动量。WheelEventdeltaMode返回数字代表增量值像素、线或页面的度量单位。WheelEventdetail返回数字指示鼠标被单击了多少次。UiEventelapsedTime返回动画已运行的秒数。AnimationEventelapsedTime返回过渡已运行的秒数。eventPhase返回当前正在评估事件流处于哪个阶段。EventgetModifierState()返回包含目标范围的数组此范围将受到插入/删除的影响。MouseEventgetTargetRanges()返回包含目标范围的数组此范围将受到插入/删除的影响。InputEventinputType返回更改的类型即 inserting 或 deleting。InputEventisComposing返回事件的状态是否正在构成。 InputEventKeyboardEventisTrusted返回事件是否受信任。Eventkey返回事件表示的键的键值。KeyboardEventkey返回更改后的存储项的键。StorageEventkeyCode返回触发 onkeypress、onkeydown 或 onkeyup 事件的键的 Unicode 字符代码。KeyboardEventlocation返回键盘或设备上按键的位置。KeyboardEventlengthComputable返回进度的长度是否可计算。ProgressEventloaded返回已加载的工作量。ProgressEventmetaKey返回事件触发时是否按下了 META 键。MouseEventmetaKey返回按键事件触发时是否按下了 META 键。 KeyboardEventTouchEventMovementX返回相对于上一 mousemove 事件的位置的鼠标指针的水平坐标MouseEventMovementY返回相对于上一 mousemove 事件的位置的鼠标指针的垂直坐标MouseEventnewURL返回更改 hash 后的文档 URL。HasChangeEventnewValue返回更改后的存储项目的新值。StorageEventoffsetX返回鼠标指针相对于目标元素边缘位置的水平坐标。MouseEventoffsetY返回鼠标指针相对于目标元素边缘位置的垂直坐标。MouseEventoldURL返回更改 hash 前的文档 URL。HasChangeEventoldValue返回更改后的存储项目的旧值。StorageEventonemptied当发生不良情况且媒体文件突然不可用时发生此事件。pageX返回触发鼠标事件时鼠标指针相对于文档的水平坐标。MouseEventpageY返回触发鼠标事件时鼠标指针相对于文档的垂直坐标。MouseEventpersisted返回网页是否被浏览器缓存。PageTransitionEventpreventDefault()如果可以取消事件则将其取消不执行属于该事件的默认操作。EventpropertyName返回与动画或过渡相关联的 CSS 属性的名称。 AnimationEventTransitionEventpseudoElement返回动画或过渡的伪元素的名称。 AnimationEventTransitionEventregionMouseEventrelatedTarget返回与触发鼠标事件的元素相关的元素。MouseEventrelatedTarget返回与触发事件的元素相关的元素。FocusEventrepeat返回是否重复按住某个键。KeyboardEventscreenX返回窗口/鼠标指针相对于屏幕的水平坐标。MouseEventscreenY返回窗口/鼠标指针相对于屏幕的垂直坐标。MouseEventshiftKey返回事件触发时是否按下了 SHIFT 键。MouseEventshiftKey返回按键事件触发时是否按下了 SHIFT 键。 KeyboardEventTouchEventstate返回包含历史记录条目副本的对象。PopStateEventstopImme...()防止同一事件的其他侦听器被调用。EventstopPropagation()防止事件在事件流中进一步传播。EventstorageArea返回代表受影响的存储对象的对象。StorageEventtarget返回触发事件的元素。EventtargetTouches返回包含仍与触摸面接触的所有触摸点的Touch对象的TouchList列表TouchEventtimeStamp返回创建事件的时间相对于纪元的毫秒数。Eventtotal返回将要加载的工作总量。ProgressEventtouches返回当前与表面接触的所有 touch 对象的列表。TouchEventtype返回事件名称。Eventurl返回已更改项目的所在文档的 URL。StorageEventwhich返回触发鼠标事件时按下的鼠标按钮。MouseEventwhich返回触发 onkeypress 事件的键的 Unicode 字符码或触发 onkeydown 或 onkeyup 事件的键的 Unicode 键码KeyboardEventview返回对发生事件的 Window 对象的引用。UiEvent
