Javascript 使用matches（）向多个元素添加偶数侦听器

我试图结合querySelectorAll和matches（）来添加如下侦听器：

HTML

<div id="bkLst" class="dropdown-menu">
    <button class="dropdown-item" type="button" data-b="Book 1">Book 1</button>
    <button class="dropdown-item" type="button" data-b="Book 2">Book 2</button>
    <button class="dropdown-item" type="button" data-b="Book 12">Book 12</button>
</div>

---

但是没有用。我缺少什么？

首先，您可以使用

const elButtons=document.queryselectoral（“bkLst button”）

选择按钮，然后循环按钮并添加事件侦听器，如下所示

let list = document.getElementById('bkLst');

let elements = list.querySelectorAll('.dropdown-item');

for(let element of elements){

   element.addEventListener('click', function() {

       console.log('iyeah')

    });
}

elButtons.forEach(el => {
  el.addEventListener("click", () => {
    //do something
  }
})

---

首先，您可以使用

const elButtons=document.queryselectoral（“#bkLst button”）

选择按钮，然后循环按钮并添加事件侦听器，如下所示

elButtons.forEach(el => {
  el.addEventListener("click", () => {
    //do something
  }
})

---

如果您试图创建委托事件处理，类似于Jquery，那么您只需要使用选择器执行

e.target.matches

，

matches

将在单个元素而不是集合上调用。请参阅我的代码片段和相关文档：，还有其他关于堆栈溢出的帖子，这些帖子与Jquery委托事件处理的本机javascript版本有关，下面是一个例子-

document.addEventListener（“单击”），函数（e）{
if（例如target.matches（#bkLst按钮”））{
log（“我是按钮：+e.target.textContent”）；
}
});

第一册
第二册
第12册
如果您试图创建委托事件处理，类似于Jquery，那么您只需要使用选择器执行
e.target.matches
，
matches
将在单个元素而不是集合上调用。请参阅我的代码片段和相关文档：，还有其他关于堆栈溢出的帖子，这些帖子与Jquery委托事件处理的本机javascript版本有关，下面是一个例子-


document.addEventListener（“单击”），函数（e）{
if（例如target.matches（#bkLst按钮”））{
log（“我是按钮：+e.target.textContent”）；
}
});

第一册
第二册
第12册