当前位置：首页 > news >正文

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

news 来源：原创 2025/5/26 6:25:43

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