没有循环的多个事件侦听器

Multiple event listener without loops

本文关键字：事件 侦听器 循环      更新时间：2023-09-26

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

<!-- 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 (){});

要让单个事件侦听器将其绑定到容器：

document.querySelector('.menu').addEventListener('click', function(e) {
    e.preventDefault();
    if (!e.target.classList.contains('trigger')) return;
    alert('.trigger clicked');
});

https://jsfiddle.net/t6frderh/

您可以侦听容器元素上的所有单击事件：

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