一七五、HTML 不同类型的事件及其说明和示例

HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。

Window 事件

1. onresize

当浏览器窗口的大小发生变化时触发。

html 复制代码
<!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() 相关)。

html 复制代码
<!-- Example with redo event -->
<button onclick="document.execCommand('redo')">Redo</button>
3. onundo

触发 undo 操作时触发。

html 复制代码
<!-- Example with undo event -->
<button onclick="document.execCommand('undo')">Undo</button>
4. onload

页面加载完成时触发。

html 复制代码
<!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

页面即将卸载时触发。

html 复制代码
<script>
  window.onunload = function() {
    alert("You are leaving the page!");
  };
</script>
6. onbeforeunload

页面卸载前触发,通常用于警告用户有未保存的工作。

html 复制代码
<script>
  window.onbeforeunload = function() {
    return "Are you sure you want to leave?";
  };
</script>
7. onerror

当页面发生错误时触发。

html 复制代码
<script>
  window.onerror = function(message, source, lineno, colno, error) {
    console.error(`Error occurred: ${message}`);
  };
</script>
8. onhaschange

当浏览器历史记录发生变化时触发。

html 复制代码
<script>
  window.onhashchange = function() {
    console.log("Hash changed: " + location.hash);
  };
</script>
9. onpopstate

浏览器历史记录状态更改时触发。

html 复制代码
<script>
  window.onpopstate = function(event) {
    console.log("State: " + event.state);
  };
</script>
10. onstorage

当发生 localStorage 或 sessionStorage 的修改时触发。

html 复制代码
<script>
  window.onstorage = function(event) {
    console.log("Storage changed: " + event.key + " " + event.newValue);
  };
</script>
11. onmessage

当接收到来自另一个窗口或 iframe 的消息时触发。

html 复制代码
<script>
  window.onmessage = function(event) {
    console.log("Message received: " + event.data);
  };
</script>
12. onpagehide

当页面隐藏时触发,通常是离开页面或切换标签页时。

html 复制代码
<script>
  window.onpagehide = function() {
    console.log("Page is hidden");
  };
</script>
13. onpageshow

当页面显示时触发,通常是通过页面加载或恢复时。

html 复制代码
<script>
  window.onpageshow = function() {
    console.log("Page is shown");
  };
</script>
14. ononline

当浏览器连接到网络时触发。

html 复制代码
<script>
  window.ononline = function() {
    console.log("You are online");
  };
</script>
15. onoffline

当浏览器断开网络连接时触发。

html 复制代码
<script>
  window.onoffline = function() {
    console.log("You are offline");
  };
</script>
16. onafterprint

页面打印完成后触发。

html 复制代码
<script>
  window.onafterprint = function() {
    console.log("Printing finished");
  };
</script>
17. onbeforeprint

页面打印之前触发。

html 复制代码
<script>
  window.onbeforeprint = function() {
    console.log("Before printing");
  };
</script>

Form 事件

1. oninput

输入字段的值发生变化时触发。

html 复制代码
<input type="text" oninput="console.log('Input changed!')">
2. onselect

用户选中输入字段的文本时触发。

html 复制代码
<input type="text" onselect="alert('Text selected')">
3. onchange

表单元素的值发生变化时触发。

html 复制代码
<select onchange="alert('Selection changed')">
  <option>Option 1</option>
  <option>Option 2</option>
</select>
4. onfocus

当表单元素获得焦点时触发。

html 复制代码
<input type="text" onfocus="console.log('Input focused')">
5. onblur

当表单元素失去焦点时触发。

html 复制代码
<input type="text" onblur="console.log('Input lost focus')">
6. onsubmit

表单提交时触发。

html 复制代码
<form onsubmit="alert('Form submitted')">
  <input type="submit" value="Submit">
</form>
7. onreset

当表单重置时触发。

html 复制代码
<form onreset="alert('Form reset')">
  <input type="reset" value="Reset">
</form>
8. onformchange

表单的任何内容发生变化时触发。

html 复制代码
<form onformchange="console.log('Form content changed')">
  <input type="text">
</form>
9. onforminput

当表单内容输入时触发。

html 复制代码
<form onforminput="console.log('Form input changed')">
  <input type="text">
</form>
10. oninvalid

表单验证失败时触发。

html 复制代码
<input type="email" oninvalid="alert('Invalid input')">

Keyboard 事件

1. onkeydown

键盘按下时触发。

html 复制代码
<input type="text" onkeydown="console.log('Key pressed')">
2. onkeypress

键盘按下并触发时(此事件已被弃用,推荐使用 onkeydown)。

html 复制代码
<input type="text" onkeypress="console.log('Key pressed')">
3. onkeyup

键盘松开时触发。

html 复制代码
<input type="text" onkeyup="console.log('Key released')">

Mouse 事件

1. onclick

鼠标单击时触发。

html 复制代码
<button onclick="alert('Button clicked')">Click me</button>
2. ondblclick

鼠标双击时触发。

html 复制代码
<button ondblclick="alert('Button double-clicked')">Double click me</button>
3. oncontextmenu

鼠标右键点击时触发。

html 复制代码
<button oncontextmenu="alert('Right-clicked')">Right-click me</button>
4. onscroll

当页面滚动时触发。

html 复制代码
<script>
  window.onscroll = function() {
    console.log("Scrolled");
  };
</script>
5. onmousewheel

当鼠标滚轮滚动时触发。

html 复制代码
<script>
  window.onmousewheel = function() {
    console.log("Mouse wheel scrolled");
  };
</script>
6. onmousedown

鼠标按下时触发。

html 复制代码
<button onmousedown="alert('Mouse button pressed')">Mouse down</button>
7. onmousemove

鼠标移动时触发。

html 复制代码
<script>
  window.onmousemove = function(event) {
    console.log(`Mouse moved: ${event.clientX}, ${event.clientY}`);
  };
</script>
8. onmouseout

鼠标移出元素时触发。

html 复制代码
<button onmouseout="alert('Mouse out')">Mouse out</button>
9. onmouseover

鼠标悬停在元素上时触发。

html 复制代码
<button onmouseover="alert('Mouse over')">Mouse over</button>
10. onmouseup

鼠标释放时触发。

html 复制代码
<button onmouseup="alert('Mouse button released')">Mouse up</button>

Drag 事件

1. ondrag

当元素被拖动时触发。

html 复制代码
<div draggable="true" ondrag="alert

('Element is being dragged')">Drag me</div>
2. ondragend

拖动操作结束时触发。

html 复制代码
<div draggable="true" ondragend="alert('Drag ended')">Drag me</div>
3. ondragenter

拖动元素进入目标区域时触发。

html 复制代码
<div ondragenter="alert('Dragged element entered target')">Drop here</div>
4. ondragleave

拖动元素离开目标区域时触发。

html 复制代码
<div ondragleave="alert('Dragged element left target')">Drop here</div>
5. ondragover

当拖动元素在目标区域上方时触发。

html 复制代码
<div ondragover="alert('Element is over target')">Drop here</div>
6. ondragstart

拖动开始时触发。

html 复制代码
<div draggable="true" ondragstart="alert('Drag started')">Drag me</div>
7. ondrop

当元素被放置到目标区域时触发。

html 复制代码
<div ondrop="alert('Element dropped')">Drop here</div>

Media 事件

1. onplay

当媒体播放时触发。

html 复制代码
<video onplay="console.log('Video started playing')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
2. onplaying

媒体开始播放时触发。

html 复制代码
<video onplaying="console.log('Video is playing')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
3. onpause

媒体暂停时触发。

html 复制代码
<video onpause="console.log('Video paused')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
4. onprogress

媒体加载进度发生变化时触发。

html 复制代码
<video onprogress="console.log('Progress made')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
5. onerror

媒体加载或播放错误时触发。

html 复制代码
<video onerror="console.log('Error loading video')" controls>
  <source src="invalid-video.mp4" type="video/mp4">
</video>
6. onabort

媒体加载被中止时触发。

html 复制代码
<video onabort="console.log('Media loading aborted')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
7. onwaiting

媒体等待数据时触发。

html 复制代码
<video onwaiting="console.log('Waiting for media data')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
8. oncanplay

媒体可以播放时触发。

html 复制代码
<video oncanplay="console.log('Video can play')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
9. oncanplaythrough

媒体可以播放完整时触发。

html 复制代码
<video oncanplaythrough="console.log('Video can play through')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
10. ondurationchange

媒体持续时间发生变化时触发。

html 复制代码
<video ondurationchange="console.log('Duration changed')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
11. onemptied

媒体数据丢失时触发。

html 复制代码
<video onemptied="console.log('Media data emptied')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
12. onended

媒体播放完毕时触发。

html 复制代码
<video onended="console.log('Video ended')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
13. onloadeddata

当媒体数据加载时触发。

html 复制代码
<video onloadeddata="console.log('Video data loaded')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
14. onloadedmetadata

当媒体元数据加载时触发。

html 复制代码
<video onloadedmetadata="console.log('Video metadata loaded')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
15. onloadstart

媒体加载开始时触发。

html 复制代码
<video onloadstart="console.log('Video loading started')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
16. onratechange

播放速率发生变化时触发。

html 复制代码
<video onratechange="console.log('Rate changed')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
17. onreadystatechange

读取媒体数据状态时触发。

html 复制代码
<video onreadystatechange="console.log('Ready state changed')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
18. onseeked

媒体定位完成时触发。

html 复制代码
<video onseeked="console.log('Seek completed')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
19. onseeking

媒体定位时触发。

html 复制代码
<video onseeking="console.log('Seeking media')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
20. onstalled

媒体下载缓慢时触发。

html 复制代码
<video onstalled="console.log('Stalled during download')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
21. onsuspend

媒体暂停下载时触发。

html 复制代码
<video onsuspend="console.log('Download suspended')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
22. ontimeupdate

媒体时间更新时触发。

html 复制代码
<video ontimeupdate="console.log('Time updated')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
23. onvolumechange

媒体音量发生变化时触发。

html 复制代码
<video onvolumechange="console.log('Volume changed')" controls>
  <source src="video.mp4" type="video/mp4">
</video>
相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试