How to listen for clicks on buttons in a Bootstrap drop down menu? -Javascript

I'm unsure of how to go about detecting clicks on the buttons in a drop down menu. The Array.from does assign an addEventListener to each button in the drop down. However, it calls function for each without listening for a click. Also, it seems incredibly inefficient to assign each individual button an eventListener. JS file is below. Each button of the drop down is pulled from an API. I can not seem to find an efficient solution, or even one that works for the bootstrap button. PLEASE NO JQUERY.

var dropDownBut=document.getElementById('dropdownMenu');

console.log("The crypto js file is connected");

 Array.from(document.getElementsByClassName("dropdown-item")).forEach(function(dropDownButton,index){
     dropDownButton.addEventListener('click',dropDown);
 });

function dropDown(){
    alert("The button was clicked at index");
}

My ejs file with the boostrap button is below.

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <%parsedData.Data.forEach(function(parsedData){%>
            <button class="dropdown-item"  type="button"><%=parsedData.CoinInfo.Name%></button>   
        <%})%>


    </div>
    </div>

Here is a working example of wiring up the buttons with Array.from. As for adding an event listener to each button, you have to do that otherwise they do not have the click handled. There are libraries that do it more "elegantly" but they are under the hood wiring all the events.

The one caveat I could see would be if you are wiring the events before all of your buttons are created.

Array.from(document.getElementsByClassName('dropdown-item')).forEach((element) => {
  element.addEventListener('click', (event) => {
    alert(`Clicked ${event.target.innerText}!`);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">

    <button class="dropdown-item" type="button">BTC</button>
    <button class="dropdown-item" type="button">NEO</button>
    <button class="dropdown-item" type="button">LTC</button>
    <button class="dropdown-item" type="button">XRP</button>



  </div>
</div>