使用matches()向多个元素添加事件监听器答案

【问题标题】：Adding even listener to multiple elements with matches()使用matches()向多个元素添加事件监听器
【发布时间】：2021-03-05 20:01:35
【问题描述】：

我试图结合 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>

document.addEventListener("click", function(e){
    if(e.target.querySelectorAll.matches("#bkLst button")){
         ...
    }
});

但无济于事。我错过了什么？

【问题讨论】：

标签： javascript

【解决方案1】：

首先您可以选择带有const elButtons = document.querySelectorAll("#bkLst button") 的按钮，然后循环按钮并添加事件监听器，如下所示

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

【讨论】：

【解决方案2】：

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

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

for(let element of elements){

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

       console.log('iyeah')

    });
}

【讨论】：

【解决方案3】：

如果您尝试创建委托事件处理，类似于 Jquery，那么您只需使用选择器执行 e.target.matches，matches 意味着在单个元素上调用，而不是在集合上调用。请查看我的代码 sn-p 和相关文档：Element.matches，Stack Overflow 上还有其他帖子与 Jquery 委托事件处理的原生 javascript 版本相关，例如 -native-js-equivalent-to-jquery-delegation

document.addEventListener("click", function(e){
    if(e.target.matches("#bkLst button")){
         console.log("I'm button:" + e.target.textContent);
    }
});

<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>

【讨论】：