javascript - 如何向多个元素添加EventListener和以element为参数的函数？

Question

我的目标是拥有一堆带有可点击单词的 div，当用户点击其中一个单词时，将它们的 id 传递给 Javascript 函数。它完美地适用于

    <div id="wordbox">
        <div id="pd"><h4>pdf</h4><br></div>
        <div id="an"><h3>analysis</h3></div>
        <div id="ai"><h2>artificial intelligence</h2></div>
        <div id="tr"><h4>trends</h4><br><br></div>
        <div id="dm"><h3>data mining</a></div>
    </div>

 var word = document.getElementById("pd");
 word.addEventListener("click", function(){ showSlide(word.id) });

但我无法让它适用于所有元素。这失败了:

  var wb = document.getElementById("wordbox").children;

  wb.forEach(function (element, index){
    element.addEventListener("click", function(){
      showSlide(element.id);
    });
  }); 

有什么想法吗？

Answer 1

当您从节点中选择子级时，它实际上返回一个类似数组的集合，它类似，但不完全是一个数组。为了使用forEach，您首先需要将其转换为数组，在下面的例子中，我使用了spread syntax将其转换为允许我使用 forEach 的 array。

const wb = document.querySelector('#wordbox')
const children = [...wb.children]

children.forEach(child => {
  child.addEventListener('click', () => {
    console.log(child.id)
  })
})

<div id="wordbox">
    <div id="pd"><h4>pdf</h4><br></div>
    <div id="an"><h3>analysis</h3></div>
    <div id="ai"><h2>artificial intelligence</h2></div>
    <div id="tr"><h4>trends</h4><br><br></div>
    <div id="dm"><h3>data mining</a></div>
</div>