Bootstrap 5.2.3 中 Modal 事件监听的正确用法

在 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 = `
    

      

        

          
xxx

							

								
								

									SciMaster
									
全球首个通用型科研AI智能体
								
								下载 
							
						
          

            Close
          
        
      
    
`;

  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 绑定生命周期事件。