如何将事件目标传递至函数？JavaScript模块化传参遇阻

嘿，我明白你在把模态框代码模块化时遇到的问题了——原本嵌套在点击事件回调里的open函数，抽出来之后没办法正常获取event.target对吧？核心问题就是模块化后，open函数不再处于事件回调的作用域内，没法直接访问事件对象里的目标元素，咱们只需要显式把目标元素传递给open方法就行，下面给你具体的解决方案：

重构Modal模块，显式传递目标元素 #

首先咱们把Modal模块重构一下，让open方法接收目标元素作为参数，同时修正一些小细节（比如getElementsByClassName不需要加.）：

var Modal = function () {
  // 获取DOM元素
  var modal = document.getElementById('myModal'),
      modalcontent = document.getElementById('modal-img-content'),
      close_btn = document.getElementsByClassName("close")[0],
      modalImg = document.getElementById('modalImg'), // 假设你原本有这个用于展示大图的元素
      imgs = document.querySelectorAll('.myImg'); // 用querySelectorAll更方便遍历

  // 私有方法：关闭模态框
  function closeModal() {
    modal.style.display = "none";
  }

  // 公开方法：打开模态框，接收目标图片元素作为参数
  function openModal(targetImg) {
    modal.style.display = "block";
    // 用传递进来的targetImg替代原来的event.target
    modalImg.src = targetImg.src;
    modalImg.alt = targetImg.alt;
    // 这里可以加你原本依赖event.target的其他逻辑
  }

  // 初始化事件监听
  function init() {
    // 绑定关闭按钮的事件
    close_btn.addEventListener('click', closeModal);
    // 给所有.myImg元素绑定点击事件，传递事件目标给openModal
    imgs.forEach(img => {
      img.addEventListener('click', function(event) {
        openModal(event.target); // 显式把event.target传给open方法
      });
    });
  }

  // 暴露需要公开的方法
  return {
    init: init,
    open: openModal
  };
}();

// 别忘了初始化模态框
Modal.init();

额外场景：外部手动调用open方法 #

如果之后需要在模块外部手动触发模态框打开，也可以直接传递对应的图片元素：

// 比如获取某个特定的图片元素
var specificImg = document.querySelector('.myImg:nth-child(2)');
// 调用Modal的open方法并传递元素
Modal.open(specificImg);

要注意的小细节 #

• 原来的img = document.getElementsByClassName('.myImg')是错误的，getElementsByClassName的参数不需要加.，直接写类名即可；用querySelectorAll会更灵活，支持forEach遍历。
• 模块化时尽量把内部逻辑（比如closeModal）设为私有，只暴露必要的公开方法（比如init和open），避免全局作用域污染。

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