對兩個對象使用一個事件偵聽器

我試圖創建一個非常簡單的窗體。我的目標是創建兩個可點擊的按鈕，每個按鈕都包含一個問題。點擊後，DOM將在每個按鈕下方輸出答案。棘手的部分是讓兩個按鈕只響應一個「addEventListener」。這裏是我的代碼：對兩個對象使用一個事件偵聽器

HTML：

<div id="wrapper"> 
    <header> 
     <h1>Have you ever wondered...</h1> 
    </header> 
    <div> 
     <button id="myBtn">How many licks it takes to get to the center of a tootsie pop?</button> 

     <p id="first"></p> 

     <h3>Or what about...</h3> 

     <button id="myBtnTwo">How tall the Eiffel Tower is?</button> 

     <p id="second"></p> 

    </div> 
</div>

JS：

document.getElementById("myBtn").addEventListener("click", function(){ 
    document.getElementById("first").innerHTML= "Approximately 364 licks!";  

    }); 

document.getElementById("myBtnTwo").addEventListener("click", function(){ 
    document.getElementById("second").innerHTML= "984 feet!"; 
});

預先感謝您！

來源

2016-11-08 Charlie_Nex

處理程序只能指出，在JS的單個元素。但是，您可以將多個處理程序分配給一個元素。而不是相反。每個按鈕都需要自己的處理程序。 – Korgrue

[看這個]（http://stackoverflow.com/questions/21700364/javascript-adding-click-event-listener-to-class）上一個問題在stackoverflow。 – Tareq

如果你想爲每個按鈕執行相同的代碼，也許你可以簡單地使用兩個按鈕的內聯onclick處理程序，如：

您只能將一個元素綁定到JS中的每個事件偵聽器。但是，您可以將多個不同的事件與一個元素關聯。

現在，解決您的問題：解決此問題的一種方法是將事件處理程序附加到父元素，然後查找作爲事件目標的元素。

<div id="wrapper"> 
    <header> 
    <h1>Have you ever wondered...</h1> 
    </header> 
<div id="btn-wrapper"> 
    <button id="myBtn">How many licks it takes to get to the center of a tootsie pop?</button> 
    <p id="first"></p> 
    <h3>Or what about...</h3> 
    <button id="myBtnTwo">How tall the Eiffel Tower is?</button> 
    <p id="second"></p> 
</div>

正如你所看到的，我將ID btn-wrapper添加到父div。然後在JS中，我將處理程序附加到所述父元素。然後你可以找到事件目標並根據它來運行你的代碼。

var theParent = document.querySelector("#btn-wrapper"); 
theParent.addEventListener("click", doSomething, false); 

function doSomething(e) { 
    if (e.target !== e.currentTarget) { 
      if (e.target === document.querySelector('#myBtn')) { 
     document.querySelector("#first").innerHTML= "Approximately 364 licks!"; 
     } else if (e.target === document.querySelector('#myBtnTwo')) { 
     document.querySelector("#second").innerHTML= "984 feet!"; 
     } 
    } 
    e.stopPropagation(); 
}

想了解更多一些的話題：https://www.kirupa.com/html5/handling_events_for_many_elements.htm

來源

2016-11-08 17:34:43 Falk

這有助於一堆，謝謝你的詳細迴應！ –

對兩個對象使用一個事件偵聽器

回答

相關問題