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

365bet手机客户端 admin 2025-09-17 00:53:08 阅读 3471

以下是一份 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.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

唯一标识元素

class

为元素指定 CSS 类名

style

行内 CSS 样式

title

悬停提示文本

↑

data-*

存储自定义数据

contenteditable

允许元素内容可编辑

2. 表单相关属性

属性名

说明

适用标签

示例

type

输入类型（text, email, password 等）

required

表单提交前必须填写

input, select, textarea

disabled

禁用表单元素

input, button

placeholder

输入框提示文本

input, textarea

min/max

数值/时间输入的最小/最大值

input[type=number, date]

pattern

输入内容的正则表达式验证

input[type=text]

3. 链接与媒体属性

属性名

说明

适用标签

示例

href

链接目标 URL

,

链接

target

打开链接的方式（如 _blank 新窗口）

新窗口打开

src

资源路径（图片、脚本、视频）

img, script, video

alt

图片无法显示时的替代文本

猫咪图片

controls

显示媒体控件（播放/暂停等）

video, audio

autoplay

媒体加载后自动播放

video, audio

4. 元信息与 SEO 属性

属性名

说明

适用标签

示例

charset

文档字符编码

name

定义元数据名称（如关键词、描述）

property

Open Graph 协议（社交媒体优化）

rel

定义链接与文档的关系

,

三、事件处理技巧

1. 阻止默认行为

javascript

复制代码

element.addEventListener('click', (e) => {

e.preventDefault(); // 阻止链接跳转/表单提交

});

2. 阻止事件冒泡

javascript

复制代码

button.onclick = (e) => {

e.stopPropagation(); // 阻止事件向上传播

};

3. 事件委托

javascript

复制代码

document.getElementById('list').addEventListener('click', (e) => {

if (e.target.tagName === 'LI') { // 只处理 li 元素点击

console.log('点击了列表项:', e.target.textContent);

}

});

四、兼容性与最佳实践

优先使用 addEventListener ：避免 onclick 等行内事件属性的覆盖问题。

移动端适配 ：使用 touchstart、touchend 替代部分鼠标事件。

语义化标签 ：优先使用

相关文章

友情链接