Bootstrap 5.2.3 中 Modal 事件监听的正确用法-js教程

在 bootstrap 5+ 中，`show.bs.modal` 等原生事件应绑定到 dom 元素（如 `#subsmodal`），而非 `bootstrap.modal` 实例对象，否则会报 `addeventlistener is not a function` 错误。

Bootstrap 5 引入了纯 JavaScript 的模块化组件 API，Modal 类（bootstrap.Modal）本身不继承 EventTarget 接口，因此不具备 addEventListener() 方法。这是与 jQuery 时代（如 Bootstrap 3/4）的关键区别——过去可通过 $().on(‘show.bs.modal’, …) 绑定事件，而 Bootstrap 5 必须将事件监听器注册到模态框的 底层 DOM 元素 上。

✅ 正确做法：事件绑定到 DOM 节点，而非 Modal 实例

function showSubscriptionInfo() {
  const data = `
    <div class="modal fade" id="subsModal" tabindex="-1" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog">
        <div class="modal-content" style="height:450px">
          <div class="modal-body"><p>xxx</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/2473" title="PpcyAI"><img
                                                                                src="https://img.php.cn/upload/ai_manual/001/246/273/176741038734713.png" alt="PpcyAI"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/2473" title="PpcyAI">PpcyAI</a>
                                                                        <p>泡泡次元AI-游戏美术AI创作平台，低门槛上手，高度可控，让你的创意秒速落地</p>
                                                                </div>
                                                                <a href="/ai/2473" title="PpcyAI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>`;

  document.getElementById('myDiv').innerHTML = data;

  // ✅ 步骤 1：获取原始 DOM 元素
  const subsModalEl = document.getElementById('subsModal');

  // ✅ 步骤 2：创建 Modal 实例（用于手动控制显示/隐藏）
  const myModal = new bootstrap.Modal(subsModalEl);

  // ✅ 步骤 3：在 DOM 元素上监听 Bootstrap 事件（关键！）
  subsModalEl.addEventListener('show.bs.modal', () => {
    console.log('Modal is about to be shown');
    alert(1);
  }, { once: true });

  subsModalEl.addEventListener('hide.bs.modal', () => {
    console.log('Modal is about to be hidden');
    alert(2);
  }, { once: true });

  // ✅ 步骤 4：调用实例方法触发显示
  myModal.show();
}

⚠️ 常见错误与注意事项

• ❌ 错误写法：myModal.addEventListener(…) —— myModal 是 bootstrap.Modal 实例，无 addEventListener；
• ✅ 正确写法：document.getElementById(‘subsModal’).addEventListener(…)；
• ? 动态插入 HTML 后，必须确保元素已挂载到 DOM 中再获取节点（本例中 innerHTML = data 后可立即 getElementById，因浏览器同步解析）；
• ? 若使用 bootstrap.bundle.min.js（含 Popper），无需额外引入 Popper；但推荐使用完整版 bootstrap.min.js + 单独 Popper（更可控）；
• ?️ 生产环境建议添加 integrity 和 crossorigin 属性以启用 SRI（子资源完整性校验），提升安全性（如答案中所示）；
• ? 使用 { once: true } 可避免重复绑定，尤其在频繁调用 showSubscriptionInfo() 的场景下防止内存泄漏。

? 补充：其他常用 Modal 事件

遵循这一原则，即可安全、可靠地为动态生成的 Bootstrap 5 Modal 绑定生命周期事件。