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

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, textareaselect.addEventListener('change', updateOptions)
input表单元素值实时改变时input, textareainput.oninput = debounce(search, 300)
focus元素获得焦点时可聚焦元素input.onfocus = showTooltip
blur元素失去焦点时可聚焦元素input.onblur = validateField

4. 窗口/文档事件

事件名触发时机适用元素示例代码
load资源(如图片、页面)加载完成window, img, iframewindow.onload = initApp;
resize窗口大小改变时windowwindow.addEventListener('resize', handleResize)
scroll元素滚动时可滚动元素div.onscroll = throttle(checkPosition, 100)

5. 其他事件

事件名触发时机适用元素示例代码
DOMContentLoadedHTML 解析完成(DOM 树就绪,无需等待资源)documentdocument.addEventListener('DOMContentLoaded', init)
transitionendCSS 过渡动画完成任意元素div.ontransitionend = removeElement
animationendCSS 动画完成任意元素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="页面描述">
propertyOpen 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);}
});

四、兼容性与最佳实践

  1. 优先使用 addEventListener:避免 onclick 等行内事件属性的覆盖问题。
  2. 移动端适配:使用 touchstarttouchend 替代部分鼠标事件。
  3. 语义化标签:优先使用 <button> 而非 <div> 模拟按钮,提升可访问性。
  4. 属性验证:对用户输入使用 requiredpattern 进行前端验证。

资源推荐

  • MDN Web 文档 - HTML 属性
  • JavaScript 事件参考

掌握这些事件和属性,你将能更高效地开发交互丰富的 Web 应用! 🚀

📚 推荐阅读

  • 无限畅用Cursor 编辑器,四步轻松搞定!
  • 历时两周半开发的一款加载live2模型的浏览器插件
  • github优秀开源作品集

相关文章:

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

以下是一份 DOM 事件 & HTML 标签属性速查手册&#xff0c;涵盖常用场景和示例&#xff0c;助你快速查阅和使用&#xff1a; 一、DOM 事件速查表 1. 鼠标事件 事件名触发时机适用元素示例代码click元素被点击任意可见元素button.addEventListener(click, () > { ... …...

PhotoShop学习01

了解Photoshop 这里省略了Photoshop的软件安装&#xff0c;请自行查找资源下载。 1.打开图片 下图为启动photoshop后出现的界面&#xff0c;我们可以通过创建新文件或打开已有文件来启用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语言机试编程题

编写版本&#xff1a;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 轻松切换几何体贴图

嗨&#xff0c;我是小路。今天主要和大家分享的主题是“threeJsvue 轻松切换几何体贴图”。 想象一下&#xff0c;手头上正好有个在线3D家具商店&#xff0c;用户不仅可以看到产品的静态图片&#xff0c;还能实时更换沙发的颜色或材质&#xff0c;获得真实的购物体验。…...

Android ObjectBox数据库使用与集成指南

ObjectBox其核心特点ObjectBox与 SQLite 和 Realm 的对比Android集成ObjectBox创建ObjectBox实体对象创建ObjectBox操作管理类OBManager在Application初始化ObjectBox插入或更新数据查询数据统计数据分页数据查询删除数据总结今天分享一套Android另一个数据库ObjectBox。Object…...

【HarmonyOS Next】地图使用详解(一)

背景 这系列文章主要讲解鸿蒙地图的使用&#xff0c;当前可以免费使用&#xff0c;并提供了丰富的SDK给开发者去自定义控件开发。目前可以实现个性化显示地图、位置搜索和路径规划等功能&#xff0c;轻松完成地图构建工作。需要注意的是&#xff0c;现在测试只能使用实体手机去…...

seacmsv9注入管理员账号密码+orderby+limi

1&#xff1a;mysql默认存储引擎innoDB携带的表 1&#xff0c;mysql.innodb_table_stats 2,mysql.innodb_index_stats SELECT table_name FROM mysql.innodb_table_stats WHERE database_name DATABASE(); 2&#xff1a; 关键字做处理 HEX编码:0x696E666F726D6174696F6E5F7…...

C#与AI的交互(以DeepSeek为例)

C#与ai的交互 与AI的交互使用的Http请求的方式&#xff0c;通过发送请求&#xff0c;服务器响应ai生成的文本 下面是完整的代码&#xff0c;我这里使用的是Ollama本地部署的deepseek&#xff0c;在联网调用api时&#xff0c;则url会有不同 public class OllamaRequester {[Se…...

面试八股文--数据库基础知识总结(2) MySQL

本文介绍关于MySQL的相关面试知识 一、关系型数据库 1、定义 关系型数据库&#xff08;Relational Database&#xff09;是一种基于关系模型的数据库管理系统&#xff08;DBMS&#xff09;&#xff0c;它将数据存储在表格&#xff08;表&#xff09;中&#xff0c;并通过表格…...

Failed to start The PHP FastCGI Process Manager.

报错如下&#xff1a; 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是一种安全防护技术&#xff0c;运行在程序执行期间&#xff0c;使程序能够自我监控和识别有害的输入和行为。也就是说一个程序如果注入或者引入了RASP技术&#xff0c;那么RASP就和这个程序融为一体&#xff0c;使应用程序具备了自我防护的能力&#xff0c;…...

Spring Boot集成MyBatis访问MySQL:从项目搭建到基础数据库查询(基础入门)

Spring Boot集成MyBatis访问MySQL 一、引言 在当今企业级应用开发中&#xff0c;Spring Boot、MyBatis与MySQL的组合凭借其高效性和灵活性&#xff0c;成为构建数据驱动型应用的首选方案。本文将带你从零开始搭建项目&#xff0c;掌握Spring Boot集成MyBatis的基础入门内容。…...

一周学会Flask3 Python Web开发-Jinja2模板继承和include标签使用

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 不管是开发网站还是后台管理系统&#xff0c;我们页面里多多少少有公共的模块。比如博客网站&#xff0c;就有公共的头部&…...

【2025.2.25更新】wordpress免费AI插件,文章内容、图片自动生成、视频自动生成、网站AI客服、批量采集文章,内置deepseek联网满血版

wordpress免费AI插件&#xff0c;文章内容、文章图片、长尾关键词、视频自动生成、网站AI客服、批量采集文章&#xff0c;插件已接入腾讯云大模型知识引擎xDeepSeek&#xff0c;基于腾讯云大模型知识引擎xDeepSeek可联网满血版&#xff0c;插件可实现文章生成、长尾关键词生成、…...

待解决 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_人工智能&#xff08;AI&#xff09;与机器学习&#xff08;ML&#xff09;在数据安全中的深度应用 人工智能与机器学习技术通过自动化、智能化的数据分析&#xff0c;显著提升了数据分类、威胁检测的精度与效率&#xff0c;尤其在处理非结构化数据、复杂…...

RocketMQ 可观测性最佳实践

RocketMQ 概述 Apache RocketMQ 是一个开源的分布式消息传递和流处理平台&#xff0c;由阿里巴巴团队最初开发并捐赠给 Apache 软件基金会。它主要用于处理大规模消息的发送和接收&#xff0c;支持高吞吐量、可扩展性强且具有高可用性的消息服务。 RocketMQ 的优势有以下几点…...

P9420 [蓝桥杯 2023 国 B] 子 2023

P9420 [蓝桥杯 2023 国 B] 子 2023 题目 分析代码 题目 分析 刚拿到这道题&#xff0c;我大脑简单算了一下&#xff0c;这个值太大了&#xff0c;直观感觉就很难&#xff01;&#xff01; 但是&#xff0c;你仔仔细细的一看&#xff0c;先从最简单的第一步入手&#xff0c;再…...

OpenAI开放Deep Research权限,AI智能体大战升级,DeepSeek与Claude迎来新对决

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑

精益数据分析&#xff08;98/126&#xff09;&#xff1a;电商转化率优化与网站性能的底层逻辑 在电子商务领域&#xff0c;转化率与网站性能是决定商业成败的核心指标。今天&#xff0c;我们将深入解析不同类型电商平台的转化率基准&#xff0c;探讨页面加载速度对用户行为的…...

统计学(第8版)——统计抽样学习笔记(考试用)

一、统计抽样的核心内容与问题 研究内容 从总体中科学抽取样本的方法利用样本数据推断总体特征&#xff08;均值、比率、总量&#xff09;控制抽样误差与非抽样误差 解决的核心问题 在成本约束下&#xff0c;用少量样本准确推断总体特征量化估计结果的可靠性&#xff08;置…...