事件委托通过在父容器绑定一次click事件并利用冒泡机制判断目标元素，既节省内存又支持动态添加图片；需为缩略图设置data-large等属性，并在事件处理器中提取数据加载预览图。
在图片画廊中用事件委托管理预览点击，核心是把点击监听绑定在父容器上，而不是每个图片项单独绑定，既节省内存又支持动态添加图片。
为什么用事件委托？
图片画廊常有十几甚至上百张缩略图，如果为每张图都绑一个 click 事件，不仅性能差，而且后续新增的图片还得重新绑定。事件委托利用事件冒泡机制，只在父级（如 <div class="gallery">）监听一次，通过 event.target 判断是否点中了某张缩略图，再决定是否触发预览逻辑。
HTML 结构要支持委托
确保缩略图有可识别的特征，比如统一类名、data-src 存大图地址、或用 alt/src 区分原图：
<div class="gallery"> <img src="thumb1.jpg" data-large="full1.jpg" alt="风景一" /> <img src="thumb2.jpg" data-large="full2.jpg" alt="风景二" /> <img src="thumb3.jpg" data-large="full3.jpg" alt="风景三" /> </div> <div id="preview"></div>
绑定委托事件并处理预览
监听父容器的 click，检查目标是否为缩略图，再加载对应大图到预览区：
立即学习“Java免费学习笔记（深入）”；
document.querySelector('.gallery').addEventListener('click', function (e) {
// 只响应 img 元素的点击
if (e.target.tagName === 'IMG') {
const largeSrc = e.target.dataset.large;
const altText = e.target.alt;
if (largeSrc) {
const preview = document.getElementById('preview');
preview.innerHTML = `
<img src="${largeSrc}" alt="${altText}" />
<button id="close-preview">×</button>
`;
// 预览图上的关闭按钮也用委托（避免重复绑定）
preview.addEventListener('click', function (e) {
if (e.target.id === 'close-preview') {
preview.innerHTML = '';
}
});
}
}
});
进阶建议：防重复触发与懒加载兼容
实际项目中注意几点：
- 加
e.stopPropagation()避免预览区内部点击误触外层委托 - 用
dataset而非getAttribute更简洁安全 - 若缩略图是懒加载（
loading="lazy"），确保data-large已存在，不依赖src - 预览弹窗建议用
dialog元素或固定定位 + backdrop，比直接 innerHTML 更可控
