本文介绍使用原生JavaScript （Vanilla JS）为多个元素添加事件监听器，添加或修改元素（element）或属性（class, id, rel, type等），为触发事件的元素添加和修改属性和元素。

Javascript为多元素添加事件监听器的步骤：

  1. 获取所有的元素
  2. 使用循环一次性添加事件监听器

获取元素

要为多个元素添加事件监听器，如要获取多个元素。因此不能使用 document.getElementById，它只能使用 id 获取一个元素。
获取多个元素要使用 document.querySelectorAll() 方法.

语法为：

els = document.querySelectorAll(selectors);

解释：
  selectors 可以是元素选择器，如h2; 类选择器，如.h2。

示例：

els = document.querySelectorAll(".myclass"); 
// 获取包含类 .myclass 的所有元素，返回值为数组

使用循环为元素添加事件

调用 document.querySelectorAll 函数返回值是一个数组。数组包含一个 forEach() 函数，用来迭代数组中包含的元素。

方法使用解释

document.querySelectorAll(".myclass").forEach( item => {
  item.addEventListener("click", event => {
        // handle click
        // 引用当前元素，箭头函数不能使用 this, 使用 event.currentTarget 引用当前对象
  })
})

使用示例

使用事件监听器为触发事件的元素的父元素添加类，再次触发时删除类。

document.querySelectorAll('.myclass') .forEach((item) => {
    item.addEventListener('click', event => {
      event.currentTarget.parentElement.classList.toggle("active")
    })
  });

示例解释：
  event.currentTarget 是对触发事件的当前元素的引用。
  parentElement 是当前元素的父元素。
  classList 元素的类列表。
  toggle() 触发时添加类，再次触发时删除类。