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);}
});
四、兼容性与最佳实践
- 优先使用
addEventListener
:避免onclick
等行内事件属性的覆盖问题。 - 移动端适配:使用
touchstart
、touchend
替代部分鼠标事件。 - 语义化标签:优先使用
<button>
而非<div>
模拟按钮,提升可访问性。 - 属性验证:对用户输入使用
required
和pattern
进行前端验证。
资源推荐:
- MDN Web 文档 - HTML 属性
- JavaScript 事件参考
掌握这些事件和属性,你将能更高效地开发交互丰富的 Web 应用! 🚀
📚 推荐阅读
- 无限畅用Cursor 编辑器,四步轻松搞定!
- 历时两周半开发的一款加载live2模型的浏览器插件
- github优秀开源作品集
相关文章:
DOM 事件 HTML 标签属性速查手册
以下是一份 DOM 事件 & HTML 标签属性速查手册,涵盖常用场景和示例,助你快速查阅和使用: 一、DOM 事件速查表 1. 鼠标事件 事件名触发时机适用元素示例代码click元素被点击任意可见元素button.addEventListener(click, () > { ... …...
差旅费控平台作用、功能、11款主流产品优劣势对比
本文将对比以下11款主流费控系统:合思、喜报销、泛微费控报销系统、经贝管家、每刻报销、SAP Concur、Expensify、Zoho Expense等。 随着全球化和企业跨地区运营的不断发展,企业差旅管理已逐渐成为许多公司面临的管理挑战之一。从差旅申请到费用报销的全…...
常用的配置文件格式对比(ini,toml,yaml,json,env,settings.py)及应用程序修改自身配置并保留注释
代码与环境配置解耦 git分支的代码应做到“环境无关”:代码本身不硬编码任何环境特定的配置(如数据库连接、密钥、API地址),而是通过外部机制动态注入。 配置与代码分离:将配置信息存储在代码库之外(如环…...
MySQL 存储过程详解
文章目录 1. 存储过程定义1.1 基本概念1.2 核心特点1.3 存储过程 vs 函数 2. 工作原理与示意图2.1 执行流程2.2 示意图 3. 使用场景3.1 复杂业务逻辑3.2 批量数据处理3.3 权限控制3.4 性能优化 4. 示例与说明4.1 基础示例:创建存储过程4.2 带输出参数的存储过程4.3 …...
使用DeepSeek/chatgpt等AI工具辅助网络协议流量数据包分析
随着deepseek,chatgpt等大模型的能力越来越强大,本文将介绍一下deepseek等LLM在分数流量数据包这方面的能力。为需要借助LLM等大模型辅助分析流量数据包的同学提供参考,也了解一下目前是否有必要继续学习wireshark工具以及复杂的协议知识。 pcap格式 目…...
源码压缩包泄露
##解题思路 因为网站的文件都放在www下面,所以直接访问/www.zip就可以得到网页的源码压缩包 在fl000g.txt这个文件中看到一个flag{flag_here}不像是真的flag,尝试提交ctfshow{flag_here},果然提交失败 打开文件属性之类的,也没有…...
TCP/IP 5层协议簇:数据链路层(交换机工作原理)
目录 1. 数据链路层 2. 帧 3. 工作在数据链路层的设备 4. 交换机工作原理 1. 数据链路层 数据链路层(2层Data Link Layer):传输单元是帧、这层工作的主要设备二层交换机、网卡 2. 帧 帧的结构如下:帧最大1518字节 如下&…...
TCP/IP的分层结构、各层的典型协议,以及与ISO七层模型的差别
1. TCP/IP的分层结构 TCP/IP模型是一个四层模型,主要用于网络通信的设计和实现。它的分层结构如下: (1) 应用层(Application Layer) 功能:提供应用程序之间的通信服务,处理特定的应用细节。 典型协议&am…...
【分布式理论11】分布式协同之分布式事务(一个应用操作多个资源):从刚性事务到柔性事务的演进
文章目录 一. 什么是分布式事务?二. 分布式事务的挑战三. 事务的ACID特性四. CAP理论与BASE理论1. CAP理论1.1. 三大特性1.2. 三者不能兼得 2. BASE理论 五. 分布式事务解决方案1. 两阶段提交(2PC)2. TCC(Try-Confirm-Cancel&…...
Linux: 已占用接口
Linux: 已占用接口 1. netstat(适用于旧系统)1.1 书中对该命令的介绍 2. ss(适用于新系统,替代 netstat)3. lsof(查看详细进程信息)4. fuser(快速查找占用端口的进程)5. …...
HWUI 和 Skia
📌 HWUI 和 Skia 的关系 Skia 是 Android 的底层 2D 图形库,提供 CPU 和 GPU 渲染能力,支持 OpenGL、Vulkan、Metal 等后端。HWUI 是 Android UI 组件的 GPU 渲染引擎,主要用于 加速 View、动画、阴影等 UI 元素的绘制。HWUI 依赖…...
Pytorch使用手册--将 PyTorch 模型导出为 ONNX(专题二十六)
注意 截至 PyTorch 2.1,ONNX 导出器有两个版本。 torch.onnx.dynamo_export 是最新的(仍处于测试阶段)导出器,基于 PyTorch 2.0 发布的 TorchDynamo 技术。 torch.onnx.export 基于 TorchScript 后端,自 PyTorch 1.2.0 起可用。 一、torch.onnx.dynamo_export使用 在 60 …...
GitHub SSH连接问题解决指南
🔍 GitHub SSH连接问题解决指南 问题描述 遇到错误:ssh: connect to host github.com port 22: Connection refused 说明您的网络环境无法访问GitHub的SSH端口22,常见原因: 防火墙/网络运营商限制(国内常见…...
【Linux】vim 设置
【Linux】vim 设置 零、起因 刚学Linux,有时候会重装Linux系统,然后默认的vi不太好用,需要进行一些设置,本文简述如何配置一个好用的vim。 壹、软件安装 sudo apt-get install vim贰、配置路径 对所有用户生效: …...
2025届开发岗秋招经验教训总结
实习 实习的作用: 学习知识,充实简历了解特定部门的氛围转正比秋招提前占坑提前展现工作能力,争取更高起薪 其中,除非有梦中情组,我认为占坑是最不重要的一个,因为现在的校招就业形势并未严峻到转正占满…...
Java 之集成 DataX 数据同步工具
1、官网下载 DataX https://github.com/alibaba/DataX 2、将依赖添加到本地(DataX没有maven坐标,需要自己安装) mvn install:install-file -Dfile"datax-common-0.0.1.jar" "-DgroupIdcom.datax" "-DartifactIdda…...
JMH 详细使用
JMH 基本使用 官方地址 JMH 是一个用于 Java 代码微基准测试的工具,允许开发者对特定部分进行精确的性能测试; 安装 JMH 环境: Maven 项目;JDK 8; Maven 方式安装 引入如下依赖: <dependencies>…...
2025 PHP授权系统网站源码
2025 PHP授权系统网站源码 安装教程: PHP7.0以上 先上传源码到服务器,然后再配置伪静态, 访问域名根据操作完成安装, 然后配置伪静态规则。 Ngix伪静态规则: location / { if (!-e $request_filename) { rewrite …...
【对话推荐系统】Towards Topic-Guided Conversational Recommender System 论文阅读
Towards Topic-Guided Conversational Recommender System 论文阅读 Abstract1 Introduction2 Related Work2.1 Conversation System2.2 Conversational Recommender System2.3 Dataset for Conversational Recommendation 3 Dataset Construction3.1 Collecting Movies for Re…...
git 使用常见错误整理
1. git am 应用补丁时遇到错误 fatal: previous rebase directory .git/rebase-apply still exists but mbox given fatal:之前的变基目录 .git/rebase-apply仍然存在,但却提供了mbox 答:这通常是因为之前的 git am 或 git rebase 操作失败后…...
数据存储:一文掌握存储数据到mysql的详细使用
文章目录 一、环境准备1.1 安装MySQL数据库1.2 安装Python MySQL驱动 二、连接到MySQL数据库三、执行基本的CRUD操作3.1 创建(Create):插入数据3.2 读取(Read):查询数据3.3 更新(Update…...
React 源码揭秘 | 更新队列
前面几篇遇到updateQueue的时候,我们把它先简单的当成了一个队列处理,这篇我们来详细讨论一下这个更新队列。 有关updateQueue中的部分,可以见源码 UpdateQueue实现 Update对象 我们先来看一下UpdateQueue中的内容,Update对象&…...
Vue3 + Vite + TS,使用 配置项目别名属性:resolve
使用 resolve 配置全局项目路径别名 1.优化了开发中单页面引用其他模块的路径复杂性 2.妥妥解决了,组件复用当中提高开发效率 // 不使用配置 import { useStore } from ../../../stores // 使用配置 可根据开发者需求任意定义,较多 import { useStore…...
使用 C# 以api的形式调用 DeepSeek
一:创建 API 密钥 首先,您需要来自 DeepSeek 的 API 密钥。访问 DeepSeek,创建一个帐户,并生成一个新的 API 密钥。 二:安装所需的 NuGet 包 使用 NuGet 包管理器安装包,或在包管理器控制台中运行以下命…...
手机放兜里,支付宝“碰一下”被盗刷?
大家好,我是小悟。 近期,网络上关于“支付宝‘碰一下’支付易被盗刷”的传言甚嚣尘上,不少用户对此心生疑虑。 首先,要明确一点:“碰一下”支付并不会像某些传言中所描述的那样容易被隔空盗刷。这一观点已经得到了支付…...
0x01 html和css
css 对于三种css使用方式: 第一种:行内样式 <span style"color: grey;">2024年05月15日 20:07</span>第二种:内部样式 <!DOCTYPE html> <html lang"en"> <head>...<style>span{…...
模型和数据集的平台之在Hugging Face上进行模型下载、上传以及创建专属Space
模型下载 步骤: 注册Hugging Face平台 https://huggingface.co/ 新建一个hf_download_josn.py 文件 touch hf_download_josn.py 编写hf_download_josn.py文件 import os from huggingface_hub import hf_hub_download# 指定模型标识符 repo_id "inter…...
轮式机器人在复杂地形中如何选择合适的全局路径规划算法?
已思考完成 收起 嗯,用户问的是轮式机器人在复杂地形中如何选择合适的全局路径规划算法。首先,我需要理解复杂地形可能带来的挑战,比如崎岖的路面、动态障碍物、非结构化环境等等。轮式机器人在这里的运动控制需要考虑地形通过性、稳定性&…...
免费使用 DeepSeek API 教程及资源汇总
免费使用 DeepSeek API 教程及资源汇总 一、DeepSeek API 资源汇总1.1 火山引擎1.2 百度千帆1.3 阿里百炼1.4 腾讯云 二、其他平台2.1 华为云2.2 硅基流动 三、总结 DeepSeek-R1 作为 2025 年初发布的推理大模型,凭借其卓越的逻辑推理能力和成本优势,迅速…...
文献汇总|AI生成图像检测相关数据集汇总
前言:本博客汇总当前AI生成图像检测领域用到的数据集及相关链接。 ⚠️:除标注「未公开」数据集,其余数据集均已开源。 目录 2020202220232024 2020 CNNSpot https://github.com/peterwang512/CNNDetection Testset: The zip file contains …...
C# 弃元的使用
总目录 前言 在C# 7.0及更高版本中,弃元(Discard)是一个新的语言特性,允许开发者在特定情况下忽略某些值。弃元用下划线 _ 作为占位符,明确表示忽略某个值,提升代码可读性 一、弃元是什么? 1.…...
蓝桥杯备考:贪心算法之矩阵消除游戏
这道题是牛客上的一道题,它呢和我们之前的排座位游戏非常之相似,但是,排座位问题选择行和列是不会改变元素的值的,这道题呢每每选一行都会把这行或者这列清零,所以我们的策略就是先用二进制把选择所有行的情况全部枚举…...
React面试(一)
文章目录 1.vue和react有什么异同2.useEffect中为什么不能使用异步3.useEffect和useLayoutEffect的区别4.react的生命周期5.state和prop的区别6.受控组件和非受控组件7.为什么react16之后不把事件挂载到document上了8.讲一下react的hoc,它可以用来做什么?…...
《解锁AI密码,机器人精准感知环境不再是梦!》
在科技飞速发展的当下,人工智能与机器人技术的融合正深刻改变着世界。其中,人工智能助力机器人实现更精准的环境感知,已成为该领域的核心课题,吸引着全球科研人员与科技企业的目光。这不仅关乎机器人能否在复杂环境中高效执行任务…...
C/C++语言知识点二
1. 编程算法之“哨兵”思想 哨兵思想是一种编程技巧,通过在数据结构的边界或特定位置放置一个特殊值(称为“哨兵”),来简化逻辑判断和提高代码效率。哨兵通常是一个标记值,用于指示某种条件或边界,从而避免…...
【SpringBoot】——分组校验、自定义注解、登入验证(集成redis)、属性配置方式、多环境开发系统学习知识
🎼个人主页:【Y小夜】 😎作者简介:一位双非学校的大三学生,编程爱好者, 专注于基础和实战分享,欢迎私信咨询! 🎆入门专栏:🎇【MySQL࿰…...
【EB-03】 AUTOSAR builder与EB RTE集成
AUTOSAR builder与EB RTE集成 1. Import Arxml files to Tresos2. Run MultiTask Script3. Add Components3.1 Run EcuExtractCreator Script4. Mapping Component to Partitions5. Event Mapping/Runnables Mapping to Tasks6. Port Connect7. Run SvcAs_Trigger Script8. Ver…...
布署elfk-准备工作
建议申请5台机器部署elfk: filebeat(每台app)--> logstash(2台keepalived)--> elasticsearch(3台)--> kibana(部署es上)采集输出 处理转发 分布式存储 展示 ELK中文社区: 搜索客,搜索人自己的社区 官方…...
JVM垃圾回收器深度底层原理分析与知识体系构建
一、垃圾回收的基本步骤 标记(Marking) 从GC Roots(如虚拟机栈、方法区静态变量、本地方法栈等)出发,遍历对象引用链,标记所有可达对象为存活对象,未被标记的则视为垃圾。此阶段需暂停用户线程&…...
Flutter系列教程之(5)——常用控件Widget的使用示例
目录 1.页面跳转 2.某个控件设置点击事件 3.AlertDialog对话框的使用 4.文本输入框 5.按钮 圆角扁平按钮: 圆角悬浮按钮: 6.补充 圆点 7.布局使用 Row控件左右对齐 调整边距 1.页面跳转 首先,先介绍一下页面跳转功能吧 Flutter使用 Navigator 进行页面…...
快手前端通用静态托管服务KFX演进历程:从崎岖土路到平坦高速
快手静态部署托管服务(KFX)历经四年发展,经历了三个阶段,一步步从勉强能行车的“崎岖土路”到现在多车道并行的“平坦高速”,这一转变极大地提升了资源利用率和效率,满足业务的实际需要。本文将带你了解其背…...
hackmyvm-buster
题目地址 信息收集 主机发现 ┌──(root㉿kali)-[/home/kali] └─# arp-scan -I eth1 192.168.56.0/24 Interface: eth1, type: EN10MB, MAC: 00:0c:29:34:da:f5, IPv4: 192.168.56.103 WARNING: Cannot open MAC/Vendor file ieee-oui.txt: Permission denied WARNING: C…...
React加TypeScript最新部署完整版
React TypeScript 全流程部署指南 一、环境准备与项目初始化 关于node.js及npm的安装请参见我的文章。 1.1 创建项目(React TypeScript) # 使用官方推荐脚手架(Vite 5.x) npx create-vitelatest my-app --template react-ts …...
DeepSeek-R1-Zero:基于基础模型的强化学习
注:此文章内容均节选自充电了么创始人,CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》(人工智能科学与技术丛书)【陈敬雷编著】【清华大学出版社】 文章目录 DeepSeek大模型技术系列四DeepSeek大模型技术系列四》DeepSeek-…...
python的列表和元组别再傻傻分不清啦
目录 什么是下标: 正数索引:正数索引从左到右,从 0 开始。 负数索引:负数索引从右到左,从 -1 开始。 切片(slice):除了单个元素,Python还支持通过切片访问序列的子集。…...
Fiddler在Windows下抓包Https
文章目录 1.Fiddler Classic 配置2.配置浏览器代理自动代理手动配置浏览器代理 3.抓取移动端 HTTPS 流量(可选)解决抓取 HTTPS 失败问题1.Fiddler证书过期了 默认情况下,Fiddler 无法直接解密 HTTPS 流量。需要开启 HTTPS 解密: 1…...
【超详细】神经网络的可视化解释
《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...
LVS+Keepalived 高可用集群搭建
一、高可用集群: 1.什么是高可用集群: 高可用集群(High Availability Cluster)是以减少服务中断时间为目地的服务器集群技术它通过保护用户的业务程序对外不间断提供的服务,把因软件、硬件、人为造成的故障对业务的影响…...
使用git管理uniapp项目
1.本地管理 1. 在项目根目录中新建 .gitignore 忽略文件,并配置如下: # 忽略 node_modules 目录 /node_modules /unpackage/dist 2. 打开终端,切换到项目根目录中,运行如下的命令,初始化本地 Git 仓库࿱…...
回调函数的用法
回调函数的基本用法 回调函数是一种被作为参数传递给另一个函数的函数,接收回调函数作为参数的函数在合适的时候会调用这个回调函数。回调函数为代码提供了更高的灵活性和可扩展性,下面为你详细介绍回调函数的基本用法。 基本概念 回调函数的核心在于函…...