一七五、HTML 差异类型的事故及其说明和示例
HTML 事故处理程序是通过 JavaScript 来捕获和相应差异的用户操纵、体系事故或浏览器事故。下面是差异类型的事故及其说明和示例。Window 事故
1. onresize
当浏览器窗口的大小发生变化时触发。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onresize Example</title>
<script>
window.onresize = function() {
console.log("Window resized");
};
</script>
</head>
<body>
<h1>Resize the window and check the console</h1>
</body>
</html>
2. onredo
触发 redo 操纵时触发（通常与 document.execCommand() 干系）。
<!-- Example with redo event -->
<button onclick="document.execCommand('redo')">Redo</button>
3. onundo
触发 undo 操纵时触发。
<!-- Example with undo event -->
<button onclick="document.execCommand('undo')">Undo</button>
4. onload
页面加载完成时触发。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload Example</title>
<script>
window.onload = function() {
alert("Page is fully loaded");
};
</script>
</head>
<body>
<h1>onload Example</h1>
</body>
</html>
5. onunload
页面即将卸载时触发。
<script>
window.onunload = function() {
alert("You are leaving the page!");
};
</script>
6. onbeforeunload
页面卸载前触发，通常用于警告用户有未生存的工作。
<script>
window.onbeforeunload = function() {
return "Are you sure you want to leave?";
};
</script>
7. onerror
当页面发生错误时触发。
<script>
window.onerror = function(message, source, lineno, colno, error) {
console.error(`Error occurred: ${message}`);
};
</script>
8. onhaschange
当浏览器汗青纪录发生变化时触发。
<script>
window.onhashchange = function() {
console.log("Hash changed: " + location.hash);
};
</script>
9. onpopstate
浏览器汗青纪录状态更改时触发。
<script>
window.onpopstate = function(event) {
console.log("State: " + event.state);
};
</script>
10. onstorage
当发生 localStorage 或 sessionStorage 的修改时触发。
<script>
window.onstorage = function(event) {
console.log("Storage changed: " + event.key + " " + event.newValue);
};
</script>
11. onmessage
当吸收到来自另一个窗口或 iframe 的消息时触发。
<script>
window.onmessage = function(event) {
console.log("Message received: " + event.data);
};
</script>
12. onpagehide
当页面隐藏时触发，通常是离开页面或切换标签页时。
<script>
window.onpagehide = function() {
console.log("Page is hidden");
};
</script>
13. onpageshow
当页面显示时触发，通常是通过页面加载或恢复时。
<script>
window.onpageshow = function() {
console.log("Page is shown");
};
</script>
14. ononline
当浏览器连接到网络时触发。
<script>
window.ononline = function() {
console.log("You are online");
};
</script>
15. onoffline
当浏览器断开网络连接时触发。
<script>
window.onoffline = function() {
console.log("You are offline");
};
</script>
16. onafterprint
页面打印完成后触发。
<script>
window.onafterprint = function() {
console.log("Printing finished");
};
</script>
17. onbeforeprint
页面打印之前触发。
<script>
window.onbeforeprint = function() {
console.log("Before printing");
};
</script>
Form 事故
1. oninput
输入字段的值发生变化时触发。
<input type="text" oninput="console.log('Input changed!')">
2. onselect
用户选中输入字段的文本时触发。
<input type="text" onselect="alert('Text selected')">
3. onchange
表单元素的值发生变化时触发。
<select onchange="alert('Selection changed')">
<option>Option 1</option>
<option>Option 2</option>
</select>
4. onfocus
当表单元素获得核心时触发。
<input type="text" onfocus="console.log('Input focused')">
5. onblur
当表单元素失去核心时触发。
<input type="text" onblur="console.log('Input lost focus')">
6. onsubmit
表单提交时触发。
<form onsubmit="alert('Form submitted')">
<input type="submit" value="Submit">
</form>
7. onreset
当表单重置时触发。
<form onreset="alert('Form reset')">
<input type="reset" value="Reset">
</form>
8. onformchange
表单的任何内容发生变化时触发。
<form onformchange="console.log('Form content changed')">
<input type="text">
</form>
9. onforminput
当表单内容输入时触发。
<form onforminput="console.log('Form input changed')">
<input type="text">
</form>
10. oninvalid
表单验证失败时触发。
<input type="email" oninvalid="alert('Invalid input')">
Keyboard 事故
1. onkeydown
键盘按下时触发。
<input type="text" onkeydown="console.log('Key pressed')">
2. onkeypress
键盘按下并触发时（此事故已被弃用，推荐使用 onkeydown）。
<input type="text" onkeypress="console.log('Key pressed')">
3. onkeyup
键盘松开时触发。
<input type="text" onkeyup="console.log('Key released')">
Mouse 事故
1. onclick
鼠标单击时触发。
<button onclick="alert('Button clicked')">Click me</button>
2. ondblclick
鼠标双击时触发。
<button ondblclick="alert('Button double-clicked')">Double click me</button>
3. oncontextmenu
鼠标右键点击时触发。
<button oncontextmenu="alert('Right-clicked')">Right-click me</button>
4. onscroll
当页面滚动时触发。
<script>
window.onscroll = function() {
console.log("Scrolled");
};
</script>
5. onmousewheel
当鼠标滚轮滚动时触发。
<script>
window.onmousewheel = function() {
console.log("Mouse wheel scrolled");
};
</script>
6. onmousedown
鼠标按下时触发。
<button onmousedown="alert('Mouse button pressed')">Mouse down</button>
7. onmousemove
鼠标移动时触发。
<script>
window.onmousemove = function(event) {
console.log(`Mouse moved: ${event.clientX}, ${event.clientY}`);
};
</script>
8. onmouseout
鼠标移出元素时触发。
<button onmouseout="alert('Mouse out')">Mouse out</button>
9. onmouseover
鼠标悬停在元素上时触发。
<button onmouseover="alert('Mouse over')">Mouse over</button>
10. onmouseup
鼠标开释时触发。
<button onmouseup="alert('Mouse button released')">Mouse up</button>
Drag 事故
1. ondrag
当元素被拖动时触发。
<div draggable="true" ondrag="alert
('Element is being dragged')">Drag me</div>
2. ondragend
拖动操纵结束时触发。
<div draggable="true" ondragend="alert('Drag ended')">Drag me</div>
3. ondragenter
拖动元素进入目标区域时触发。
<div ondragenter="alert('Dragged element entered target')">Drop here</div>
4. ondragleave
拖动元素离开目标区域时触发。
<div ondragleave="alert('Dragged element left target')">Drop here</div>
5. ondragover
当拖动元素在目标区域上方时触发。
<div ondragover="alert('Element is over target')">Drop here</div>
6. ondragstart
拖动开始时触发。
<div draggable="true" ondragstart="alert('Drag started')">Drag me</div>
7. ondrop
当元素被放置到目标区域时触发。
<div ondrop="alert('Element dropped')">Drop here</div>
Media 事故
1. onplay
当媒体播放时触发。
<video onplay="console.log('Video started playing')" controls>
<source src="video.mp4" type="video/mp4">
</video>
2. onplaying
媒体开始播放时触发。
<video onplaying="console.log('Video is playing')" controls>
<source src="video.mp4" type="video/mp4">
</video>
3. onpause
媒体停息时触发。
<video onpause="console.log('Video paused')" controls>
<source src="video.mp4" type="video/mp4">
</video>
4. onprogress
媒体加载进度发生变化时触发。
<video onprogress="console.log('Progress made')" controls>
<source src="video.mp4" type="video/mp4">
</video>
5. onerror
媒体加载或播放错误时触发。
<video onerror="console.log('Error loading video')" controls>
<source src="invalid-video.mp4" type="video/mp4">
</video>
6. onabort
媒体加载被中止时触发。
<video onabort="console.log('Media loading aborted')" controls>
<source src="video.mp4" type="video/mp4">
</video>
7. onwaiting
媒体等候数据时触发。
<video onwaiting="console.log('Waiting for media data')" controls>
<source src="video.mp4" type="video/mp4">
</video>
8. oncanplay
媒体可以播放时触发。
<video oncanplay="console.log('Video can play')" controls>
<source src="video.mp4" type="video/mp4">
</video>
9. oncanplaythrough
媒体可以播放完整时触发。
<video oncanplaythrough="console.log('Video can play through')" controls>
<source src="video.mp4" type="video/mp4">
</video>
10. ondurationchange
媒体连续时间发生变化时触发。
<video ondurationchange="console.log('Duration changed')" controls>
<source src="video.mp4" type="video/mp4">
</video>
11. onemptied
媒体数据丢失时触发。
<video onemptied="console.log('Media data emptied')" controls>
<source src="video.mp4" type="video/mp4">
</video>
12. onended
媒体播放完毕时触发。
<video onended="console.log('Video ended')" controls>
<source src="video.mp4" type="video/mp4">
</video>
13. onloadeddata
当媒体数据加载时触发。
<video onloadeddata="console.log('Video data loaded')" controls>
<source src="video.mp4" type="video/mp4">
</video>
14. onloadedmetadata
当媒体元数据加载时触发。
<video onloadedmetadata="console.log('Video metadata loaded')" controls>
<source src="video.mp4" type="video/mp4">
</video>
15. onloadstart
媒体加载开始时触发。
<video onloadstart="console.log('Video loading started')" controls>
<source src="video.mp4" type="video/mp4">
</video>
16. onratechange
播放速率发生变化时触发。
<video onratechange="console.log('Rate changed')" controls>
<source src="video.mp4" type="video/mp4">
</video>
17. onreadystatechange
读取媒体数据状态时触发。
<video onreadystatechange="console.log('Ready state changed')" controls>
<source src="video.mp4" type="video/mp4">
</video>
18. onseeked
媒体定位完成时触发。
<video onseeked="console.log('Seek completed')" controls>
<source src="video.mp4" type="video/mp4">
</video>
19. onseeking
媒体定位时触发。
<video onseeking="console.log('Seeking media')" controls>
<source src="video.mp4" type="video/mp4">
</video>
20. onstalled
媒体下载缓慢时触发。
<video onstalled="console.log('Stalled during download')" controls>
<source src="video.mp4" type="video/mp4">
</video>
21. onsuspend
媒体停息下载时触发。
<video onsuspend="console.log('Download suspended')" controls>
<source src="video.mp4" type="video/mp4">
</video>
22. ontimeupdate
媒体时间更新时触发。
<video ontimeupdate="console.log('Time updated')" controls>
<source src="video.mp4" type="video/mp4">
</video>
23. onvolumechange
媒体音量发生变化时触发。
<video onvolumechange="console.log('Volume changed')" controls>
<source src="video.mp4" type="video/mp4">
</video>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]