Angular中如何为指定HTML类的所有元素统一绑定公共函数

当然可以实现给同一类的所有元素绑定统一触发函数，不需要逐个添加事件，推荐用**事件委托（事件冒泡）**的方案实现，性能更好，也支持后续动态新增的同class元素自动生效，不需要重复绑定。

方案1：适配当前代码的Angular框架实现 #

你可以直接在所有dropdown-item的公共父元素.dropdown-menu上绑定点击事件，判断触发源的类名即可，不需要给每个子元素单独加click绑定：

<li class="nav-item dropdown primary">
  <a class="nav-link links-bar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Eyes
  </a>
  <!-- 给父元素绑定点击事件 -->
  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" (click)="handleDropdownClick($event)">
    <a class="dropdown-item" id="14">Eye Pencil</a>
    <a class="dropdown-item" id="13">Mascara</a>
    <a class="dropdown-item" id="12">Eye Brow</a>
    <a class="dropdown-item" data-value="4">Eye Lashes</a>
    <a class="dropdown-item" data-value="5">Eye Liner</a>
    <a class="dropdown-item" data-value="6">Eye Shadow</a>
  </div>
</li>

在组件内添加对应的处理函数：

handleDropdownClick(e: Event) {
  const target = e.target as HTMLElement;
  // 仅点击dropdown-item类的元素时才执行逻辑
  if (target.classList.contains('dropdown-item')) {
    // 直接调用原来的处理函数即可，也可以自行获取元素的id、data-value等属性
    this.selectChangeLink(e);
  }
}

方案2：原生JS通用实现 #

如果不使用框架，直接把事件绑定到公共父元素或者document上即可：

// 绑定到公共父元素性能更好，也可以直接绑定到document
document.querySelector('.dropdown-menu').addEventListener('click', function(e) {
  if (e.target.classList.contains('dropdown-item')) {
    // 执行你的处理逻辑
    selectChangeLink(e);
  }
})

方案优势 #

• 代码更简洁，避免重复给每个元素绑定事件
• 后续动态新增的class="dropdown-item"元素不需要重新绑定事件，自动触发逻辑
• 减少事件绑定的内存占用，页面性能更好

内容的提问来源于stack exchange，提问作者chivas