javascript - 如何正确使用 querySelectorAll 和 addEventListener

Question

使用 querySelectorAll 方法的正确方法是什么？我只是想为每个带有'.box'类的div添加一个点击事件，但它不起作用。我发现如果我用“getElementById”替换该方法并只测试厨房盒子，这会很好。

document.querySelectorAll('.box').addEventListener('click', test);

function test() {
  console.log('hi');
}

<section class="main">
  <div class="box" id="kitchen"></div>
  <div class="box" id="laundry"></div>
  <div class="box" id="bedroom"></div>
</section>

标签： javascriptdom

Answer 1

这真的很简单，您只需遍历每个元素并添加一个事件侦听器。

document.querySelectorAll('.box').forEach(item => {
  item.addEventListener('click', event => {
    // Handle the click event here
  })
})