用事件委托处理图片墙是因为它性能好、支持动态内容且代码简洁；通过监听父容器click事件，利用事件冒泡判断目标是否为图片，再动态创建lightbox弹窗展示大图，并支持Esc关闭、方向键切换等交互优化。
图片墙点击放大用事件委托，核心是把点击监听绑定在父容器上，利用事件冒泡捕获子元素（图片）的点击，再动态创建和显示大图。
为什么用事件委托处理图片墙
图片墙通常由大量 <img> 标签组成，可能动态加载或分页渲染。如果给每张图单独绑 click 事件，不仅性能差（大量监听器）、还容易漏绑新插入的图片。事件委托只需一个监听器，天然支持动态内容，代码更简洁可靠。
基础实现：监听父容器 + 判断目标
确保图片墙有一个共同父容器（如 <div id="gallery">），然后监听它的 click 事件，通过 event.target 判断是否点中了图片：
- 检查
event.target.tagName === 'IMG'或加 class 判断（如event.target.classList.contains('gallery-img')） - 获取原图地址：
const src = event.target.src；也可从data-large属性读取高清图链接，避免缩略图放大失真 - 阻止默认行为（防止图片被另存或跳转）：
event.preventDefault()
动态创建并显示大图弹窗
点击后不跳转页面，而是插入一个半透明遮罩层 + 大图 + 关闭按钮：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 用
document.createElement创建<div class="lightbox">，内部包含<img>和关闭按钮 - 设置大图
src为原图或data-large值，宽高设为auto，配合max-width: 90vw; max-height: 90vh;自适应屏幕 - 遮罩层加
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 1000; - 点击遮罩或关闭按钮时，移除整个 lightbox 元素
增强体验的小细节
让放大效果更自然、操作更友好：
- 添加 CSS 过渡：给 lightbox 的
opacity和transform加transition: all 0.3s ease - 按 Esc 键关闭：
document.addEventListener('keydown', e => e.key === 'Escape' && removeLightbox()) - 支持方向键切换（需维护当前图片索引，结合
event.target在父容器中查找兄弟节点位置） - 移动端适配：禁用图片拖动（
img { user-select: none; -webkit-user-drag: none; }），并监听 touchend 替代 click
不复杂但容易忽略——关键是把逻辑收拢到一次监听里，用语义化属性（如 data-large）解耦缩略图和原图，再用轻量 DOM 操作完成展示闭环。
