快一点。
我正在尝试使用标准 javascript 连接到 Bootstrap 下拉方法 show.bs.dropdown。我见过很多 jquery 解决方案，但我似乎无法使用 vanilla js 进行复制。
Jquery
$('.city-picker').on('shown.bs.dropdown', function () {
console.log('Called from within Jquery event');
});
普通 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');
}
如有任何帮助，我们将不胜感激。
谢谢
最佳答案
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(处理事件触发过程)
注册这些事件并将它们绑定(bind)到您的元素
所以当你注册一个像下面这样的事件时:
$('.dropdown').on('show.bs.dropdown', yourFunctionName )
jQuery 会跟踪它...
jQuery.event.add( this, types, fn, data, selector );
Line: 4962
因此，当需要触发事件 show.bs.dropdown 时，它会查看在 $.on 中注册的所有事件，这些事件链接到触发它们的事件相应地...
( handleObj.handler ).apply( matched.elem, args );
Line 5206: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js
所以你可以从上面看到，它实际上并没有触发原生 Javascript 事件而是调用链接函数并向它发送参数....
因此，如果您想在 vanilla js 中执行此操作，AFAIK 似乎是不可能的，因为整个过程的开始是从 $('.dropdown').on('show.bs.dropdown', yourFunctionName ) 更具体地说 $.on ....
所以看看 jQuery + Bootstrap 在显示/隐藏下拉菜单时实际做了什么，看起来他们只是切换添加类 show 到 .dropdown-toggle 元素....
因此，正如您从上面看到的，我使用了 MutationObserver 功能来监听 .dropdown-toggle 元素的类属性的变化
真希望有一个更简单的方法来做到这一点，但不幸的是，这就是我所能想到的。
关于javascript - Bootstrap Dropdown addEventListener( Vanilla js)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49389048/