如何監聽 Bootstrap 下拉菜單中按鈕的點擊？ -Javascript

Question

我不確定如何檢測下拉菜單中按鈕的點擊。 Array.from 確實為下拉列表中的每個按鈕分配了一個 addEventListener。 但是，它會為每個函數調用函數，而無需監聽點擊。 此外，為每個單獨的按鈕分配一個 eventListener 似乎非常低效。 JS文件如下。 下拉菜單的每個按鈕都是從 API 中拉出來的。 我似乎找不到有效的解決方案，甚至找不到適用於引導按鈕的解決方案。 請不要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");
}

我的帶有 boostrap 按鈕的 ejs 文件如下。

<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>

Answer 1

這是一個使用 Array.from 連接按鈕的工作示例。 至於為每個按鈕添加一個事件偵聽器，您必須這樣做，否則它們不會處理單擊。 有些庫做得更“優雅”，但它們在幕后連接所有事件。

我可以看到的一個警告是，如果您在創建所有按鈕之前連接事件。

 var elements = document.getElementsByClassName('dropdown-item'); Array.from(elements).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>