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领…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)
本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...
c++第七天 继承与派生2
这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分:派生类构造函数与析构函数 当创建一个派生类对象时,基类成员是如何初始化的? 1.当派生类对象创建的时候,基类成员的初始化顺序 …...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机,交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息,系统版本:Ubuntu22.04.5 LTS;内核版本…...
React父子组件通信:Props怎么用?如何从父组件向子组件传递数据?
系列回顾: 在上一篇《React核心概念:State是什么?》中,我们学习了如何使用useState让一个组件拥有自己的内部数据(State),并通过一个计数器案例,实现了组件的自我更新。这很棒&#…...
CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx
“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网(IIoT)场景中,结合 DDS(Data Distribution Service) 和 Rx(Reactive Extensions) 技术,实现 …...
