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, () > { ... …...
PhotoShop学习01
了解Photoshop 这里省略了Photoshop的软件安装,请自行查找资源下载。 1.打开图片 下图为启动photoshop后出现的界面,我们可以通过创建新文件或打开已有文件来启用photoshop的工作界面。 可以通过左边的按钮进行新文件的创建或打开已有文件。 也可以点…...
mongodb【实用教程】
MongoDB 是一个开源的文档型数据库管理系统 下载安装 Windows 系统 https://blog.csdn.net/weixin_41192489/article/details/126777309 GUI工具 【推荐】MongoDB Compass https://www.mongodb.com/zh-cn/docs/compass/current/ Robo 3T https://blog.csdn.net/weixin_4119248…...
C语言机试编程题
编写版本:vc2022 1.求最大/小值 #include<stdio.h> int main(){int a[50],n;int max, min;printf("请输入您要输入几个数");scanf_s("%d", &n);printf("请输入您要比较的%d个数\n",n);for (int i 0; i<n; i) {scanf_…...
threeJs+vue 轻松切换几何体贴图
嗨,我是小路。今天主要和大家分享的主题是“threeJsvue 轻松切换几何体贴图”。 想象一下,手头上正好有个在线3D家具商店,用户不仅可以看到产品的静态图片,还能实时更换沙发的颜色或材质,获得真实的购物体验。…...
Android ObjectBox数据库使用与集成指南
ObjectBox其核心特点ObjectBox与 SQLite 和 Realm 的对比Android集成ObjectBox创建ObjectBox实体对象创建ObjectBox操作管理类OBManager在Application初始化ObjectBox插入或更新数据查询数据统计数据分页数据查询删除数据总结今天分享一套Android另一个数据库ObjectBox。Object…...
【HarmonyOS Next】地图使用详解(一)
背景 这系列文章主要讲解鸿蒙地图的使用,当前可以免费使用,并提供了丰富的SDK给开发者去自定义控件开发。目前可以实现个性化显示地图、位置搜索和路径规划等功能,轻松完成地图构建工作。需要注意的是,现在测试只能使用实体手机去…...
seacmsv9注入管理员账号密码+orderby+limi
1:mysql默认存储引擎innoDB携带的表 1,mysql.innodb_table_stats 2,mysql.innodb_index_stats SELECT table_name FROM mysql.innodb_table_stats WHERE database_name DATABASE(); 2: 关键字做处理 HEX编码:0x696E666F726D6174696F6E5F7…...
C#与AI的交互(以DeepSeek为例)
C#与ai的交互 与AI的交互使用的Http请求的方式,通过发送请求,服务器响应ai生成的文本 下面是完整的代码,我这里使用的是Ollama本地部署的deepseek,在联网调用api时,则url会有不同 public class OllamaRequester {[Se…...
面试八股文--数据库基础知识总结(2) MySQL
本文介绍关于MySQL的相关面试知识 一、关系型数据库 1、定义 关系型数据库(Relational Database)是一种基于关系模型的数据库管理系统(DBMS),它将数据存储在表格(表)中,并通过表格…...
Failed to start The PHP FastCGI Process Manager.
报错如下: Job for php-fpm.service failed because the control process exited with error code. See "systemctl status php-fpm.service" and "journalctl -xe" for details. 2月 25 21:49:00 nginx systemd[1]: Starting The PHP FastC…...
软件供应链安全工具链研究系列——RASP自适应威胁免疫平台(上篇)
1.1 基本能力 RASP是一种安全防护技术,运行在程序执行期间,使程序能够自我监控和识别有害的输入和行为。也就是说一个程序如果注入或者引入了RASP技术,那么RASP就和这个程序融为一体,使应用程序具备了自我防护的能力,…...
Spring Boot集成MyBatis访问MySQL:从项目搭建到基础数据库查询(基础入门)
Spring Boot集成MyBatis访问MySQL 一、引言 在当今企业级应用开发中,Spring Boot、MyBatis与MySQL的组合凭借其高效性和灵活性,成为构建数据驱动型应用的首选方案。本文将带你从零开始搭建项目,掌握Spring Boot集成MyBatis的基础入门内容。…...
一周学会Flask3 Python Web开发-Jinja2模板继承和include标签使用
锋哥原创的Flask3 Python Web开发 Flask3视频教程: 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 不管是开发网站还是后台管理系统,我们页面里多多少少有公共的模块。比如博客网站,就有公共的头部&…...
【2025.2.25更新】wordpress免费AI插件,文章内容、图片自动生成、视频自动生成、网站AI客服、批量采集文章,内置deepseek联网满血版
wordpress免费AI插件,文章内容、文章图片、长尾关键词、视频自动生成、网站AI客服、批量采集文章,插件已接入腾讯云大模型知识引擎xDeepSeek,基于腾讯云大模型知识引擎xDeepSeek可联网满血版,插件可实现文章生成、长尾关键词生成、…...
待解决 leetcode71 简化路径 栈的应用
用多种ifelse很不好很复杂容易丢情况 class Solution { public:string simplifyPath(string path) {stack<char> st;string result;int n path.size();while(n > 1 && (path[n-1] / || path[n-1] .)){if(n > 2 && path[n-2] . && pat…...
数据安全_笔记系列09_人工智能(AI)与机器学习(ML)在数据安全中的深度应用
数据安全_笔记系列09_人工智能(AI)与机器学习(ML)在数据安全中的深度应用 人工智能与机器学习技术通过自动化、智能化的数据分析,显著提升了数据分类、威胁检测的精度与效率,尤其在处理非结构化数据、复杂…...
RocketMQ 可观测性最佳实践
RocketMQ 概述 Apache RocketMQ 是一个开源的分布式消息传递和流处理平台,由阿里巴巴团队最初开发并捐赠给 Apache 软件基金会。它主要用于处理大规模消息的发送和接收,支持高吞吐量、可扩展性强且具有高可用性的消息服务。 RocketMQ 的优势有以下几点…...
P9420 [蓝桥杯 2023 国 B] 子 2023
P9420 [蓝桥杯 2023 国 B] 子 2023 题目 分析代码 题目 分析 刚拿到这道题,我大脑简单算了一下,这个值太大了,直观感觉就很难!! 但是,你仔仔细细的一看,先从最简单的第一步入手,再…...
OpenAI开放Deep Research权限,AI智能体大战升级,DeepSeek与Claude迎来新对决
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
