使用addEventListener替代img内联onclick实现模态框触发

你可以通过事件委托来实现需求，不用给每张图片单独绑定onclick事件，而是给父容器绑定一个监听器，利用事件冒泡处理所有缩略图的点击，同时把关闭按钮的事件也改成JS绑定，保持代码统一。

修改后的HTML代码 #

<div class="full-img-modal">
  <img src="img/gallery-images/gallery-img-01.jpg" alt="" id="full-img">
  <span class="close-gallery fa-solid fa-circle-xmark"></span>
</div>

<div class="img-gallery">
  <img src="img/gallery-images/gallery-img-01.jpg" alt="" class="img-thumb">
  <img src="img/gallery-images/gallery-img-02.jpg" alt="" class="img-thumb">
  <img src="img/gallery-images/gallery-img-03.jpg" alt="" class="img-thumb">
  <img src="img/gallery-images/gallery-img-04.jpg" alt="" class="img-thumb">
  <img src="img/gallery-images/gallery-img-05.jpg" alt="" class="img-thumb">
  <img src="img/gallery-images/gallery-img-06.jpg" alt="" class="img-thumb">
  <img src="img/gallery-images/gallery-img-07.jpg" alt="" class="img-thumb">
  <img src="img/gallery-images/gallery-img-08.jpg" alt="" class="img-thumb">
</div>

修改后的JavaScript代码 #

const fullImgModal = document.querySelector('.full-img-modal');
const fullImg = document.querySelector('#full-img');
const closeGallery = document.querySelector('.close-gallery');
const imgGallery = document.querySelector('.img-gallery');

// 打开模态框逻辑
function openFullImgModal(photo) {
  fullImgModal.style.display = "flex";
  fullImg.src = photo;
}

// 关闭模态框逻辑
function closeFullImgModal() {
  fullImgModal.style.display = "none";
}

// 给图片容器绑定事件委托，处理所有缩略图点击
imgGallery.addEventListener('click', function(event) {
  // 确认点击目标是缩略图（兼容嵌套元素的情况）
  const thumbImg = event.target.closest('.img-thumb');
  if (thumbImg) {
    openFullImgModal(thumbImg.src);
  }
});

// 给关闭按钮绑定点击事件
closeGallery.addEventListener('click', closeFullImgModal);

// 点击模态框背景关闭
window.addEventListener('click', function(event) {
  if (event.target === fullImgModal) {
    closeFullImgModal();
  }
});

额外说明 #

1. 事件委托优势：只需要绑定一个监听器即可处理所有缩略图的点击，后续动态新增图片也无需重新绑定事件，性能和可维护性更优。
2. closest('.img-thumb')的作用：避免缩略图被其他元素包裹时，点击事件触发失败的问题，比直接判断event.target更稳妥。

内容的提问来源于stack exchange，提问作者J A