如何用原生JS监听Bootstrap Dropdown的shown.bs.dropdown事件？

嘿，我懂你这种找不到原生JS实现Bootstrap下拉事件监听的郁闷——网上一搜全是jQuery方案，我来帮你解决这个问题！

首先得明确你的Bootstrap版本，不同版本的实现逻辑有差异：

情况1：使用Bootstrap 5及以上版本（推荐） #

Bootstrap 5已经完全移除了jQuery依赖，原生JS可以直接监听它的自定义事件。你的代码思路是对的，但可能踩了两个常见的坑：

1. 代码执行时机过早：如果你的JS代码在DOM还没加载完成时就运行，getElementsByClassName可能拿不到目标元素，导致监听失败。
2. 不必要的bind(this)：如果只是简单的日志输出，不需要绑定上下文，反而可能干扰事件的正常触发。

修正后的原生JS代码如下：

// 确保DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 用querySelector更简洁，同时检查元素是否存在
  const picker = document.querySelector('.city-picker');
  if (picker) {
    picker.addEventListener('shown.bs.dropdown', function() {
      console.log('Called from within Vanilla JS event');
    });
  }
});

注意：.city-picker需要是下拉菜单的触发器元素（带有data-bs-toggle="dropdown"属性）或者下拉菜单的父容器（带有dropdown类），否则事件不会触发在这个元素上。

情况2：使用Bootstrap 4及以下版本（依赖jQuery） #

这些版本的Bootstrap事件是通过jQuery触发的自定义事件，原生JS无法直接监听。这时候可以通过“事件桥接”的方式解决：在jQuery的事件处理函数中手动触发一个原生自定义事件，然后用原生JS监听这个事件。

步骤1：先保留你的jQuery代码，添加触发原生事件的逻辑：

$('.city-picker').on('shown.bs.dropdown', function () {
  console.log('Called from within Jquery event');
  // 触发原生自定义事件，bubbles设为true让事件可以冒泡
  this.dispatchEvent(new CustomEvent('shown.bs.dropdown', { bubbles: true }));
});

步骤2：用原生JS监听这个事件：

document.addEventListener('DOMContentLoaded', function() {
  const picker = document.querySelector('.city-picker');
  if (picker) {
    picker.addEventListener('shown.bs.dropdown', function() {
      console.log('Called from within Vanilla JS event');
    });
  }
});

当然，更推荐的方式是升级到Bootstrap 5，这样就能完全摆脱jQuery的依赖，直接用原生JS实现所有功能啦！

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