DOM 事件 & HTML 标签属性速查手册

以下是一份 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);
  }
});

四、兼容性与最佳实践

1. 优先使用 addEventListener ：避免 onclick 等行内事件属性的覆盖问题。
2. 移动端适配 ：使用 touchstart、touchend 替代部分鼠标事件。
3. 语义化标签 ：优先使用 <button> 而非 <div> 模拟按钮，提升可访问性。
4. 属性验证 ：对用户输入使用 required 和 pattern 进行前端验证。

资源推荐：

• MDN Web 文档 - HTML 属性
• JavaScript 事件参考

掌握这些事件和属性，你将能更高效地开发交互丰富的 Web 应用！ 🚀

📚 推荐阅读

• 无限畅用Cursor 编辑器，四步轻松搞定！
• 历时两周半开发的一款加载live2模型的浏览器插件
• github优秀开源作品集