Bootstrap Dropdown addEventListener (Vanilla js)

Question

Quick one.

I'm trying to hook into the bootstrap dropdown method show.bs.dropdown using standard javascript. I've seen lots of jquery solutions but I can't seem to replicate with 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');
}

Any help would be much apprecaited.

Thanks

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>

---

So after some investigation, it looks like jQuery (which handles the event firing process)

registers these events and binds them to your element

so when you register an event like the following:

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

jQuery keeps track of it...

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

Line: 4962

so when the event show.bs.dropdown needs to be fired, it has a look at all events registered with $.on that linked to this event fires them accordingly...

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

Line 5206: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js

So you can see from above, it does not actually trigger a native Javascript Event but rather calls the linked function and sends arguments to it....

So, if you wanted to do this in vanilla js, AFAIK, seems impossible since the start of this whole process begins with $('.dropdown').on('show.bs.dropdown', yourFunctionName ) more specifically $.on ....

So had a look at what jQuery + Bootstrap actually do when they show / hide the dropdown, and it seems like they just toggle adding the class show to the .dropdown-toggle element....

Thus, as you can see from above, I made use of the MutationObserver functionality which listens to changes in the .dropdown-toggle element's class attribute

---

Really wish there was a simpler way to do this, but unfortunately this is all I could come up with.