2つのオブジェクトに対して1つのイベントリスナーを使用する

Question

非常に単純なフォームを作成しようとしています。私の目的は、それぞれが質問を含む2つのクリック可能なボタンを作成することです。クリックすると、DOMは各ボタンの下に答えを出力します。トリッキーな部分は、両方のボタンがただ1つの "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!"; 
}); 

は、事前にありがとうございます！

Answer 1

JS内のすべてのイベントリスナーにのみ1つの要素をバインドできます。ただし、複数の異なるイベントを1つの要素に関連付けることができます。

あなたの質問を解決するには、次のようにします。この状況に対処する1つの方法は、イベントハンドラを親要素に関連付けて、イベントのターゲットである要素を見つけることです。

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

ご覧のとおり、私は親のdivにid btn-wrapperを追加しました。そして、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