没有循环的多事件监听器

Question

我在我的项目中有相同的结构！

<!-- menu structure--> 
    <nav class="menu"> 
     <a class="trigger" href="#">item</a> 
     <a class="trigger" href="#">item</a> 
     <a class="trigger" href="#">item</a> 
     <a class="trigger" href="#">item</a> 
     <a class="trigger" href="#">item</a> 
    </nav> 

我想一个事件侦听器添加到所有的触发，但是我发现在使用循环的解决方案，这里是JS

menuitens = document.querySelectorAll('.trigger'); 
menuitens.addEventListener("click", function(){}); 

Answer 1

有一个单一的事件侦听器只是将其绑定到容器而不是：

document.querySelector('.menu').addEventListener('click', function(e) { 
    e.preventDefault(); 

    if (!e.target.classList.contains('trigger')) return; 

    alert('.trigger clicked'); 
}); 

https://jsfiddle.net/t6frderh/

Answer 2

你可以听所有的点击甚至ts对容器元素：

document.querySelector(".menu").addEventListener(
    'click', 
    function(e) 
    { 
    if (e.target.classList.contains('target')) 
    { 
     // do stuff .... 
    } 
    } 
);