以下是一份 DOM 事件 & HTML 标签属性速查手册，涵盖常用场景和示例，助你快速查阅和使用：
一、DOM 事件速查表
1. 鼠标事件
| 事件名 |
触发时机 |
适用元素 |
示例代码 |
click |
元素被点击 |
任意可见元素 |
button.addEventListener('click', () => { ... }) |
dblclick |
元素被双击 |
任意可见元素 |
div.addEventListener('dblclick', handleDoubleClick) |
mouseover |
鼠标移入元素 |
任意可见元素 |
img.onmouseover = () => { ... } |
mouseout |
鼠标移出元素 |
任意可见元素 |
div.addEventListener('mouseout', logExit) |
mousemove |
鼠标在元素内移动 |
任意可见元素 |
canvas.onmousemove = trackPosition |
contextmenu |
右键点击元素（弹出菜单前） |
任意元素 |
document.oncontextmenu = blockDefaultMenu |
2. 键盘事件
| 事件名 |
触发时机 |
适用元素 |
示例代码 |
keydown |
键盘按键按下时 |
可聚焦元素（如 input） |
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') submit() }) |
keyup |
键盘按键释放时 |
可聚焦元素 |
input.onkeyup = validateInput |
keypress |
按键按下并产生字符时（已弃用，建议用 keydown） |
可聚焦元素 |
- |
3. 表单事件
| 事件名 |
触发时机 |
适用元素 |
示例代码 |
submit |
表单提交时 |
<form> |
form.onsubmit = (e) => { e.preventDefault(); ... } |
change |
表单元素值改变并失焦后 |
input, select, textarea |
select.addEventListener('change', updateOptions) |
input |
表单元素值实时改变时 |
input, textarea |
input.oninput = debounce(search, 300) |
focus |
元素获得焦点时 |
可聚焦元素 |
input.onfocus = showTooltip |
blur |
元素失去焦点时 |
可聚焦元素 |
input.onblur = validateField |
4. 窗口/文档事件
| 事件名 |
触发时机 |
适用元素 |
示例代码 |
load |
资源（如图片、页面）加载完成 |
window, img, iframe |
window.onload = initApp; |
resize |
窗口大小改变时 |
window |
window.addEventListener('resize', handleResize) |
scroll |
元素滚动时 |
可滚动元素 |
div.onscroll = throttle(checkPosition, 100) |
5. 其他事件
| 事件名 |
触发时机 |
适用元素 |
示例代码 |
DOMContentLoaded |
HTML 解析完成（DOM 树就绪，无需等待资源） |
document |
document.addEventListener('DOMContentLoaded', init) |
transitionend |
CSS 过渡动画完成 |
任意元素 |
div.ontransitionend = removeElement |
animationend |
CSS 动画完成 |
任意元素 |
box.onanimationend = () => { ... } |
二、HTML 标签属性速查表
1. 全局属性（所有标签可用）
| 属性名 |
说明 |
示例 |
id |
唯一标识元素 |
<div id="header"></div> |
class |
为元素指定 CSS 类名 |
<p class="text-red"></p> |
style |
行内 CSS 样式 |
<div style="color: red;"></div> |
title |
悬停提示文本 |
<a href="#" title="返回顶部">↑</a> |
data-* |
存储自定义数据 |
<div data-user-id="123"></div> |
contenteditable |
允许元素内容可编辑 |
<div contenteditable="true"></div> |
2. 表单相关属性
| 属性名 |
说明 |
适用标签 |
示例 |
type |
输入类型（text, email, password 等） |
<input> |
<input type="email"> |
required |
表单提交前必须填写 |
input, select, textarea |
<input required> |
disabled |
禁用表单元素 |
input, button |
<button disabled>提交</button> |
placeholder |
输入框提示文本 |
input, textarea |
<input placeholder="请输入姓名"> |
min/max |
数值/时间输入的最小/最大值 |
input[type=number, date] |
<input type="number" min="1" max="10"> |
pattern |
输入内容的正则表达式验证 |
input[type=text] |
<input pattern="\d{3}-\d{4}"> |
3. 链接与媒体属性
| 属性名 |
说明 |
适用标签 |
示例 |
href |
链接目标 URL |
<a>, <link> |
<a href="https://example.com">链接</a> |
target |
打开链接的方式（如 _blank 新窗口） |
<a> |
<a target="_blank">新窗口打开</a> |
src |
资源路径（图片、脚本、视频） |
img, script, video |
<img src="logo.png"> |
alt |
图片无法显示时的替代文本 |
<img> |
<img src="cat.jpg" alt="猫咪图片"> |
controls |
显示媒体控件（播放/暂停等） |
video, audio |
<video controls></video> |
autoplay |
媒体加载后自动播放 |
video, audio |
<audio autoplay></audio> |
4. 元信息与 SEO 属性
| 属性名 |
说明 |
适用标签 |
示例 |
charset |
文档字符编码 |
<meta> |
<meta charset="UTF-8"> |
name |
定义元数据名称（如关键词、描述） |
<meta> |
<meta name="description" content="页面描述"> |
property |
Open Graph 协议（社交媒体优化） |
<meta> |
<meta property="og:title" content="标题"> |
rel |
定义链接与文档的关系 |
<link>, <a> |
<link rel="stylesheet" href="style.css"> |
三、事件处理技巧
1. 阻止默认行为
element.addEventListener('click', (e) => {
e.preventDefault(); // 阻止链接跳转/表单提交
});
2. 阻止事件冒泡
button.onclick = (e) => {
e.stopPropagation(); // 阻止事件向上传播
};
3. 事件委托
document.getElementById('list').addEventListener('click', (e) => {
if (e.target.tagName === 'LI') { // 只处理 li 元素点击
console.log('点击了列表项:', e.target.textContent);
}
});
四、兼容性与最佳实践
- 优先使用
addEventListener：避免 onclick 等行内事件属性的覆盖问题。
- 移动端适配：使用
touchstart、touchend 替代部分鼠标事件。
- 语义化标签：优先使用
<button> 而非 <div> 模拟按钮，提升可访问性。
- 属性验证：对用户输入使用
required 和 pattern 进行前端验证。
资源推荐：
掌握这些事件和属性，你将能更高效地开发交互丰富的 Web 应用！ 🚀
📚 推荐阅读
评论区