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

Question

我正在尝试创建一个非常简单的表单。 我的目标是创建两个可点击的按钮，每个按钮包含一个问题。 单击时，DOM 将在每个按钮下方显示 output 答案。 棘手的部分是让两个按钮只响应一个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>

记者：

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 中每个事件监听器只能绑定一个元素。 但是，您可以将多个不同的事件与一个元素相关联。

现在，解决您的问题：解决这种情况的一种方法是将事件处理程序附加到父元素，然后找到作为事件目标的元素。

<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

Answer 2

const findBtns = [...document.querySelectorAll("button")];
const handleClick = (event) => {
    console.log(event.target.textContent);
};
findBtns.forEach((el) => el.addEventListener("click", handleClick));

您可以简单地使用另一个选择器(.querySelectorAll)并进一步使用伪数组。 如果您只需要从按钮中提取文本，最好使用 /.textContent/。 /.innerHTML/ 如果您不能 100% 确定您的代码中需要它，则可能是有害的。

Answer 3

您可以为容器 div 添加一个侦听器，然后检查单击了哪个元素：

 document.querySelector('#container').addEventListener('click', (e) => { if (e.target.id === 'myBtn') { document.querySelector('#first').innerText = 'answer 1' } if (e.target.id === 'myBtnTwo') { document.querySelector('#second').innerText = 'answer 2' } })

 <div id="wrapper"> <header> <h1>Have you ever wondered...</h1> </header> <div id='container'> <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>