事件委托是处理网格图片点击放大预览的高效方式，核心是监听父容器click事件，通过e.target识别img元素并提取data-large属性构建轻量lightbox预览层，支持esc键和遮罩点击关闭，兼顾性能与移动端体验。
事件委托是处理网格图片点击放大预览的高效方式，尤其适合动态添加图片或图片数量较多的场景。核心思路是：不给每张图片单独绑定 click 事件，而是监听父容器（如 .grid），通过事件对象的 target 判断是否点击了 <img>，再提取其 src 或自定义属性用于预览。
1. HTML 结构要简洁明确
网格容器用语义化标签（如 section 或 div），每张图片用 <img>，推荐加上 data-large 属性存放大图地址（适配缩略图与原图分离的场景）：
2. 用事件委托监听并识别图片点击
在父容器上绑定一次 click，检查 e.target 是否为 <img> 元素。注意排除点击文字、空白等非目标区域：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 用
e.target.tagName === 'IMG'做基础判断 - 建议加一层保护：用
e.target.closest('img')更稳妥（兼容点击 img 内部 padding 或伪元素） - 从
e.target取src或dataset.large，优先用dataset.large避免缩略图被误放大
3. 构建轻量预览层（不依赖第三方库）
点击后动态创建一个遮罩层（.lightbox）和大图元素，插入 document.body：
- 遮罩背景用半透黑：
background: rgba(0,0,0,.9) - 图片居中显示，最大宽高设为视口的 90%，用
max-width/max-height+object-fit: contain - 点击遮罩或按
Esc键关闭：监听click（区分 target 是遮罩还是图片）和keydown - 关闭时直接
remove()整个 lightbox，不需清空内容或重置样式
4. 注意细节提升体验
小但关键的优化点：
- 点击图片时加
e.preventDefault()，防止部分浏览器默认行为干扰 - 给预览图加
loading="lazy"不影响，但预览图建议设置decoding="async"提升解码性能 - 移动端需加
touch-action: manipulation到图片上，减少点击延迟 - 如果网格用 CSS Grid 实现，确保父容器有
position: relative（非必需，但方便后续绝对定位操作）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
