沒有循環的多事件監聽器

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 .... 
    } 
    } 
);