Question

快一点。

我正在尝试使用标准javascript挂钩引导下拉方法show.bs.dropdown。我见过很多jquery解决方案，但我似乎无法用vanilla js复制。

Jquery的

$('.city-picker').on('shown.bs.dropdown', function () {
  console.log('Called from within Jquery event');
});

Vanilla JS

let picker = document.getElementsByClassName('city-picker')[0];
picker.addEventListener('shown.bs.dropdown', handleOpen.bind(this));

function handleOpen() {
  console.log('Called from within vanilla event');
}

任何帮助都会得到很多帮助。

由于

Answer 1

TLDR;

(function($) {
  $('.dropdown-toggle').dropdown();
})(jQuery)
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(mutation => {
    if (mutation.target.classList.contains("show")) {
      console.info("Dropdown Shown");
    } else {
      console.info("Dropdown Hidden")
    }
  })


});
observer.observe(document.querySelector('.dropdown-menu'), {
  attributes: true,
  attributeOldValue: true,
  attributeFilter: ['class']
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.js"></script>


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown button
    </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

因此，经过一些调查，它看起来像jQuery（用于处理事件触发过程）

注册这些事件并将其绑定到您的元素

所以当您注册如下事件时：

$('.dropdown').on('show.bs.dropdown', yourFunctionName )

jQuery跟踪它...

jQuery.event.add( this, types, fn, data, selector );

行：4962

因此，当需要触发事件show.bs.dropdown时，它会查看与$.on注册的所有与此事件相关联的事件，从而相应地触发它们...

( handleObj.handler ).apply( matched.elem, args );

第5206行：https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js

因此您可以从上方看到，它 实际上并不会触发本地Javascript事件 ，而是调用链接的函数并向其发送参数。 >

因此，如果您想在香草js中使用AFAIK，这似乎是不可能的，因为整个过程的开始都是从$('.dropdown').on('show.bs.dropdown', yourFunctionName )开始，更具体地说是$.on ....

因此，看看jQuery + Bootstrap在显示/隐藏下拉菜单时实际执行的操作，看来他们只是在将show类添加到.dropdown-toggle元素中而已。...< / p>

因此，从上面可以看到，我利用了MutationObserver功能，该功能可以监听.dropdown-toggle元素的class属性中的变化

真的希望有一个更简单的方法来执行此操作，但是很遗憾，这就是我能想到的全部内容。

Bootstrap Dropdown addEventListener（Vanilla js）

1 个答案: