MVC架构下如何为动态渲染的元素添加事件监听器？

首先你现有代码存在一个小问题：document.querySelector('.btns')返回单个DOM元素，无法调用forEach方法，需要替换为document.querySelectorAll('.btns')。

针对你遇到的MVC职责边界问题，有两种完全符合规范的落地方案：

方案1：使用事件委托（优先推荐） #

利用事件冒泡机制，将监听器绑定在Modal的根容器上（这个容器是第一次渲染Modal时就生成的稳定DOM节点，不会被内部替换操作影响），不需要每次动态替换卡片后重复绑定监听，完全不会打破MVC职责划分：

// Controller.js 仅需在首次渲染Modal后执行一次
function addModalListeners() {
  // 绑定在Modal根容器上，无需关注内部元素的动态增删
  const modalRoot = document.querySelector('.modal-root');
  modalRoot.addEventListener('click', (e) => {
    // 匹配点击目标是否为卡片按钮，可通过自定义属性传递卡片标识
    if (e.target.matches('.card-btn')) {
      const cardId = e.target.dataset.cardId;
      // 所有业务逻辑在Controller内处理完成后，调用View的替换方法
      const newCardData = /* 业务逻辑计算得到的新卡片数据 */;
      view.replaceCard(cardId, newCardData);
    }
  })
}

View层只需要在渲染卡片/按钮时，给按钮加上对应的类名和data-*自定义属性即可，不需要处理任何监听逻辑，完全符合View只负责DOM渲染的职责要求。

方案2：回调注入（适合复杂交互场景） #

也就是你想到的方案，将Controller中的点击业务逻辑封装为独立函数，作为参数传递给View的渲染方法，View在渲染按钮时直接绑定该回调即可：

// Controller.js 定义统一的点击处理逻辑
const handleCardBtnClick = (cardId) => {
  const newCardData = /* 业务逻辑计算得到的新卡片数据 */;
  // 替换卡片时继续传入回调，保证新生成的按钮也能绑定逻辑
  view.replaceCard(cardId, newCardData, handleCardBtnClick);
}

// 首次渲染Modal时传入回调
if(response.data) {
    view.renderModal(response.data, handleCardBtnClick);
}

// View.js 仅负责绑定传入的回调，不涉及任何业务逻辑
function renderModal(data, onBtnClick) {
  data.forEach(card => {
    const btn = document.createElement('button');
    btn.classList.add('card-btn');
    btn.dataset.cardId = card.id;
    // 直接绑定Controller传入的回调
    btn.addEventListener('click', () => onBtnClick(card.id));
    // 剩余渲染逻辑...
  })
}

function replaceCard(cardId, newCardData, onBtnClick) {
  const newCard = renderSingleCard(newCardData, onBtnClick);
  document.getElementById(`card-${cardId}`).replaceWith(newCard);
}

选型参考 #

• 交互逻辑简单、同类按钮数量多的场景优先用事件委托，代码量更小，不会出现重复绑定、内存泄漏问题
• 交互逻辑复杂、不同按钮需要传递不同自定义参数的场景用回调注入，逻辑可读性更高

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