对两个对象使用一个事件侦听器

我试图创建一个非常简单的窗体。我的目标是创建两个可点击的按钮，每个按钮都包含一个问题。点击后，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

这有助于一堆，谢谢你的详细回应！ –

对两个对象使用一个事件侦听器

回答

相关问题