常见的HTML事件

江浔
154 阅读3分钟

HTML 事件是用户与网页交互时触发的动作，例如点击按钮、输入文本、鼠标悬停等。以下是一些常见的 HTML 事件及其用途：

1. 鼠标事件

事件名称描述
click鼠标点击元素时触发。
dblclick鼠标双击元素时触发。
mouseover鼠标指针移动到元素上时触发。
mouseout鼠标指针离开元素时触发。
mousemove鼠标指针在元素内移动时触发。
mousedown鼠标按钮按下时触发。
mouseup鼠标按钮释放时触发。
mouseenter鼠标指针进入元素时触发（不冒泡）。
mouseleave鼠标指针离开元素时触发（不冒泡）。

示例：

<button onclick="alert('Clicked!')">Click Me</button>
<div onmouseover="this.style.backgroundColor='gray'" onmouseout="this.style.backgroundColor='white'">
  Hover over me
</div>

2. 键盘事件

事件名称描述
keydown按下键盘上的任意键时触发。
keyup释放键盘上的任意键时触发。
keypress按下键盘上的字符键时触发（已废弃，使用 keydown 替代）。
input输入字段的内容发生变化时触发。

示例：

<input type="text" oninput="console.log('Input changed')">
<script>
  document.addEventListener('keydown', (e) => {
    console.log(`Key pressed: ${e.key}`);
  });
</script>

3. 表单事件

事件名称描述
submit表单提交时触发。
change表单字段的值发生变化时触发。
focus元素获得焦点时触发。
blur元素失去焦点时触发。
reset表单重置时触发。

示例：

<form onsubmit="alert('Form submitted'); return false;">
  <input type="text" onchange="alert('Value changed')">
  <button type="submit">Submit</button>
</form>

4. 窗口和文档事件

事件名称描述
load页面或资源加载完成时触发。
DOMContentLoaded文档加载完成时触发（不包括样式表、图片等）。
resize窗口大小改变时触发。
scroll滚动条位置改变时触发。
unload页面卸载时触发（例如关闭窗口或跳转到其他页面）。

示例：

<script>
  window.onload = () => {
    console.log('Window loaded');
  };

  window.onresize = () => {
    console.log('Window resized');
  };
</script>

5. 剪贴板事件

事件名称描述
copy用户执行复制操作时触发。
cut用户执行剪切操作时触发。
paste用户执行粘贴操作时触发。

示例：

<div oncopy="console.log('Content copied')">
  Select and copy this text
</div>

6. 自定义事件

你可以使用 JavaScript 创建自定义事件，并在需要时触发它们。

示例：

// 创建自定义事件
const customEvent = new Event('myCustomEvent');

// 监听自定义事件
document.addEventListener('myCustomEvent', () => {
  console.log('Custom event triggered');
});

// 触发自定义事件
document.dispatchEvent(customEvent);

7. 触摸事件（移动端）

事件名称描述
touchstart手指触摸屏幕时触发。
touchmove手指在屏幕上移动时触发。
touchend手指从屏幕上抬起时触发。
touchcancel触摸事件被中断时触发（例如电话呼入）。

示例：

<div ontouchstart="console.log('Touch started')">
  Touch me
</div>

8. 多媒体事件

事件名称描述
play媒体开始播放时触发。
pause媒体暂停播放时触发。
ended媒体播放结束时触发。
loadedmetadata媒体元数据加载完成时触发。

示例：

<video src="example.mp4" onplay="console.log('Video playing')"></video>

9. 网络事件

事件名称描述
online浏览器从离线状态切换到在线状态时触发。
offline浏览器从在线状态切换到离线状态时触发。

示例：

window.addEventListener('online', () => {
  console.log('You are now online');
});

window.addEventListener('offline', () => {
  console.log('You are now offline');
});

总结

HTML 事件是实现用户交互和动态功能的关键。通过监听和处理这些事件，可以为用户提供更丰富的交互体验。以上列举的事件涵盖了大多数常见的场景，但 HTML 和 JavaScript 的事件系统非常强大，还有更多事件可供使用。

avatar
文章
阅读
粉丝