一七五、HTML 差异类型的事故及其说明和示例

丝  金牌会员 | 2024-11-11 05:55:52 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 807|帖子 807|积分 2421

HTML 事故处理程序是通过 JavaScript 来捕获和相应差异的用户操纵、体系事故或浏览器事故。下面是差异类型的事故及其说明和示例。
Window 事故

1. onresize

当浏览器窗口的大小发生变化时触发。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>onresize Example</title>
  6.   <script>
  7.     window.onresize = function() {
  8.       console.log("Window resized");
  9.     };
  10.   </script>
  11. </head>
  12. <body>
  13.   <h1>Resize the window and check the console</h1>
  14. </body>
  15. </html>
复制代码
2. onredo

触发 redo 操纵时触发（通常与 document.execCommand() 干系）。
  1. <!-- Example with redo event -->
  2. <button onclick="document.execCommand('redo')">Redo</button>
复制代码
3. onundo

触发 undo 操纵时触发。
  1. <!-- Example with undo event -->
  2. <button onclick="document.execCommand('undo')">Undo</button>
复制代码
4. onload

页面加载完成时触发。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>onload Example</title>
  6.   <script>
  7.     window.onload = function() {
  8.       alert("Page is fully loaded");
  9.     };
  10.   </script>
  11. </head>
  12. <body>
  13.   <h1>onload Example</h1>
  14. </body>
  15. </html>
复制代码
5. onunload

页面即将卸载时触发。
  1. <script>
  2.   window.onunload = function() {
  3.     alert("You are leaving the page!");
  4.   };
  5. </script>
复制代码
6. onbeforeunload

页面卸载前触发，通常用于警告用户有未生存的工作。
  1. <script>
  2.   window.onbeforeunload = function() {
  3.     return "Are you sure you want to leave?";
  4.   };
  5. </script>
复制代码
7. onerror

当页面发生错误时触发。
  1. <script>
  2.   window.onerror = function(message, source, lineno, colno, error) {
  3.     console.error(`Error occurred: ${message}`);
  4.   };
  5. </script>
复制代码
8. onhaschange

当浏览器汗青纪录发生变化时触发。
  1. <script>
  2.   window.onhashchange = function() {
  3.     console.log("Hash changed: " + location.hash);
  4.   };
  5. </script>
复制代码
9. onpopstate

浏览器汗青纪录状态更改时触发。
  1. <script>
  2.   window.onpopstate = function(event) {
  3.     console.log("State: " + event.state);
  4.   };
  5. </script>
复制代码
10. onstorage

当发生 localStorage 或 sessionStorage 的修改时触发。
  1. <script>
  2.   window.onstorage = function(event) {
  3.     console.log("Storage changed: " + event.key + " " + event.newValue);
  4.   };
  5. </script>
复制代码
11. onmessage

当吸收到来自另一个窗口或 iframe 的消息时触发。
  1. <script>
  2.   window.onmessage = function(event) {
  3.     console.log("Message received: " + event.data);
  4.   };
  5. </script>
复制代码
12. onpagehide

当页面隐藏时触发，通常是离开页面或切换标签页时。
  1. <script>
  2.   window.onpagehide = function() {
  3.     console.log("Page is hidden");
  4.   };
  5. </script>
复制代码
13. onpageshow

当页面显示时触发，通常是通过页面加载或恢复时。
  1. <script>
  2.   window.onpageshow = function() {
  3.     console.log("Page is shown");
  4.   };
  5. </script>
复制代码
14. ononline

当浏览器连接到网络时触发。
  1. <script>
  2.   window.ononline = function() {
  3.     console.log("You are online");
  4.   };
  5. </script>
复制代码
15. onoffline

当浏览器断开网络连接时触发。
  1. <script>
  2.   window.onoffline = function() {
  3.     console.log("You are offline");
  4.   };
  5. </script>
复制代码
16. onafterprint

页面打印完成后触发。
  1. <script>
  2.   window.onafterprint = function() {
  3.     console.log("Printing finished");
  4.   };
  5. </script>
复制代码
17. onbeforeprint

页面打印之前触发。
  1. <script>
  2.   window.onbeforeprint = function() {
  3.     console.log("Before printing");
  4.   };
  5. </script>
复制代码
Form 事故

1. oninput

输入字段的值发生变化时触发。
  1. <input type="text" oninput="console.log('Input changed!')">
复制代码
2. onselect

用户选中输入字段的文本时触发。
  1. <input type="text" onselect="alert('Text selected')">
复制代码
3. onchange

表单元素的值发生变化时触发。
  1. <select onchange="alert('Selection changed')">
  2.   <option>Option 1</option>
  3.   <option>Option 2</option>
  4. </select>
复制代码
4. onfocus

当表单元素获得核心时触发。
  1. <input type="text" onfocus="console.log('Input focused')">
复制代码
5. onblur

当表单元素失去核心时触发。
  1. <input type="text" onblur="console.log('Input lost focus')">
复制代码
6. onsubmit

表单提交时触发。
  1. <form onsubmit="alert('Form submitted')">
  2.   <input type="submit" value="Submit">
  3. </form>
复制代码
7. onreset

当表单重置时触发。
  1. <form onreset="alert('Form reset')">
  2.   <input type="reset" value="Reset">
  3. </form>
复制代码
8. onformchange

表单的任何内容发生变化时触发。
  1. <form onformchange="console.log('Form content changed')">
  2.   <input type="text">
  3. </form>
复制代码
9. onforminput

当表单内容输入时触发。
  1. <form onforminput="console.log('Form input changed')">
  2.   <input type="text">
  3. </form>
复制代码
10. oninvalid

表单验证失败时触发。
  1. <input type="email" oninvalid="alert('Invalid input')">
复制代码
Keyboard 事故

1. onkeydown

键盘按下时触发。
  1. <input type="text" onkeydown="console.log('Key pressed')">
复制代码
2. onkeypress

键盘按下并触发时（此事故已被弃用，推荐使用 onkeydown）。
  1. <input type="text" onkeypress="console.log('Key pressed')">
复制代码
3. onkeyup

键盘松开时触发。
  1. <input type="text" onkeyup="console.log('Key released')">
复制代码
Mouse 事故

1. onclick

鼠标单击时触发。
  1. <button onclick="alert('Button clicked')">Click me</button>
复制代码
2. ondblclick

鼠标双击时触发。
  1. <button ondblclick="alert('Button double-clicked')">Double click me</button>
复制代码
3. oncontextmenu

鼠标右键点击时触发。
  1. <button oncontextmenu="alert('Right-clicked')">Right-click me</button>
复制代码
4. onscroll

当页面滚动时触发。
  1. <script>
  2.   window.onscroll = function() {
  3.     console.log("Scrolled");
  4.   };
  5. </script>
复制代码
5. onmousewheel

当鼠标滚轮滚动时触发。
  1. <script>
  2.   window.onmousewheel = function() {
  3.     console.log("Mouse wheel scrolled");
  4.   };
  5. </script>
复制代码
6. onmousedown

鼠标按下时触发。
  1. <button onmousedown="alert('Mouse button pressed')">Mouse down</button>
复制代码
7. onmousemove

鼠标移动时触发。
  1. <script>
  2.   window.onmousemove = function(event) {
  3.     console.log(`Mouse moved: ${event.clientX}, ${event.clientY}`);
  4.   };
  5. </script>
复制代码
8. onmouseout

鼠标移出元素时触发。
  1. <button onmouseout="alert('Mouse out')">Mouse out</button>
复制代码
9. onmouseover

鼠标悬停在元素上时触发。
  1. <button onmouseover="alert('Mouse over')">Mouse over</button>
复制代码
10. onmouseup

鼠标开释时触发。
  1. <button onmouseup="alert('Mouse button released')">Mouse up</button>
复制代码
Drag 事故

1. ondrag

当元素被拖动时触发。
  1. <div draggable="true" ondrag="alert
  3. ('Element is being dragged')">Drag me</div>
复制代码
2. ondragend

拖动操纵结束时触发。
  1. <div draggable="true" ondragend="alert('Drag ended')">Drag me</div>
复制代码
3. ondragenter

拖动元素进入目标区域时触发。
  1. <div ondragenter="alert('Dragged element entered target')">Drop here</div>
复制代码
4. ondragleave

拖动元素离开目标区域时触发。
  1. <div ondragleave="alert('Dragged element left target')">Drop here</div>
复制代码
5. ondragover

当拖动元素在目标区域上方时触发。
  1. <div ondragover="alert('Element is over target')">Drop here</div>
复制代码
6. ondragstart

拖动开始时触发。
  1. <div draggable="true" ondragstart="alert('Drag started')">Drag me</div>
复制代码
7. ondrop

当元素被放置到目标区域时触发。
  1. <div ondrop="alert('Element dropped')">Drop here</div>
复制代码
Media 事故

1. onplay

当媒体播放时触发。
  1. <video onplay="console.log('Video started playing')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
2. onplaying

媒体开始播放时触发。
  1. <video onplaying="console.log('Video is playing')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
3. onpause

媒体停息时触发。
  1. <video onpause="console.log('Video paused')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
4. onprogress

媒体加载进度发生变化时触发。
  1. <video onprogress="console.log('Progress made')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
5. onerror

媒体加载或播放错误时触发。
  1. <video onerror="console.log('Error loading video')" controls>
  2.   <source src="invalid-video.mp4" type="video/mp4">
  3. </video>
复制代码
6. onabort

媒体加载被中止时触发。
  1. <video onabort="console.log('Media loading aborted')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
7. onwaiting

媒体等候数据时触发。
  1. <video onwaiting="console.log('Waiting for media data')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
8. oncanplay

媒体可以播放时触发。
  1. <video oncanplay="console.log('Video can play')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
9. oncanplaythrough

媒体可以播放完整时触发。
  1. <video oncanplaythrough="console.log('Video can play through')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
10. ondurationchange

媒体连续时间发生变化时触发。
  1. <video ondurationchange="console.log('Duration changed')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
11. onemptied

媒体数据丢失时触发。
  1. <video onemptied="console.log('Media data emptied')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
12. onended

媒体播放完毕时触发。
  1. <video onended="console.log('Video ended')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
13. onloadeddata

当媒体数据加载时触发。
  1. <video onloadeddata="console.log('Video data loaded')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
14. onloadedmetadata

当媒体元数据加载时触发。
  1. <video onloadedmetadata="console.log('Video metadata loaded')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
15. onloadstart

媒体加载开始时触发。
  1. <video onloadstart="console.log('Video loading started')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
16. onratechange

播放速率发生变化时触发。
  1. <video onratechange="console.log('Rate changed')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
17. onreadystatechange

读取媒体数据状态时触发。
  1. <video onreadystatechange="console.log('Ready state changed')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
18. onseeked

媒体定位完成时触发。
  1. <video onseeked="console.log('Seek completed')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
19. onseeking

媒体定位时触发。
  1. <video onseeking="console.log('Seeking media')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
20. onstalled

媒体下载缓慢时触发。
  1. <video onstalled="console.log('Stalled during download')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
21. onsuspend

媒体停息下载时触发。
  1. <video onsuspend="console.log('Download suspended')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
22. ontimeupdate

媒体时间更新时触发。
  1. <video ontimeupdate="console.log('Time updated')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
23. onvolumechange

媒体音量发生变化时触发。
  1. <video onvolumechange="console.log('Volume changed')" controls>
  2.   <source src="video.mp4" type="video/mp4">
  3. </video>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

丝

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表