如何确定触发事件的ElementRef？多输入绑定监听器无法识别触发源

嘿，这个场景我在项目里碰到过好多次！不管你是在原生JS环境还是Angular项目中（毕竟你提到了ElementRef，大概率是后者），都有清晰的方法定位到触发事件的元素，我给你拆解两种常用思路：

一、直接利用事件对象（最简便） #

不管是哪种框架，事件触发时都会传递一个事件对象，通过它就能拿到触发源：

Angular 示例 #

在模板里给每个输入元素绑定事件时，传入$event参数：

<input type="text" (input)="handleInputChange($event)">
<input type="text" (input)="handleInputChange($event)">

然后在组件类里，从事件对象中提取目标元素，再封装成ElementRef：

import { ElementRef } from '@angular/core';

handleInputChange(event: Event) {
  // 获取原生DOM元素，这里根据你的元素类型调整（比如HTMLInputElement）
  const nativeElement = event.target as HTMLInputElement;
  // 将原生元素转为Angular的ElementRef
  const triggerRef = new ElementRef(nativeElement);

  // 现在你就可以用这个ElementRef做任何操作了，比如访问nativeElement属性
  console.log('触发事件的元素：', triggerRef.nativeElement);
}

小提示：区分event.target和event.currentTarget

• target：实际触发事件的元素（比如如果输入框里有图标，点击图标时target是图标元素）
• currentTarget：绑定事件监听的元素（永远是你绑定事件的那个input）
  根据你的业务需求选择对应的属性即可。

二、结合@ViewChildren批量匹配 #

如果你需要提前获取所有输入元素的ElementRef集合，也可以用@ViewChildren来做批量匹配：

Angular 示例 #

先在模板里给每个输入元素添加模板引用变量：

<input #inputItem type="text" (input)="handleInputChange($event)">
<input #inputItem type="text" (input)="handleInputChange($event)">

然后在组件类中获取所有匹配的ElementRef，并在事件中对比匹配：

import { ViewChildren, QueryList, ElementRef } from '@angular/core';

@ViewChildren('inputItem') inputRefs: QueryList<ElementRef<HTMLInputElement>>;

handleInputChange(event: Event) {
  const targetElement = event.target as HTMLInputElement;
  // 从已有的ElementRef集合中找到匹配的那个
  const matchedRef = this.inputRefs.find(ref => ref.nativeElement === targetElement);

  if (matchedRef) {
    console.log('找到对应的ElementRef：', matchedRef);
    // 这里可以对matchedRef做后续操作
  }
}

三、原生JS场景（补充） #

如果是纯原生JS环境，不需要ElementRef的话，直接通过事件对象或this就能拿到触发元素：

const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
  input.addEventListener('input', function(event) {
    // 方法1：this指向绑定事件的元素（注意不能用箭头函数，否则this会指向全局）
    console.log('触发元素：', this);
    // 方法2：通过event.target获取
    console.log('触发元素：', event.target);
  });
});

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