Angular的Renderer2.listen()方法是否支持传入多个监听目标元素？

结论 #

Renderer2.listen()方法原生不支持传入多个DOM元素作为监听目标，其第一个入参仅支持单个目标对象，可以是普通DOM元素、window/document/body这类全局对象。

符合DRY原则的实现方案 #

你可以通过以下两种方案实现多元素批量监听，同时保证代码可维护性：

• 方案1：批量遍历注册+统一销毁
  把所有需要绑定监听的元素整理到数组中，遍历每个元素调用listen方法，将返回的销毁函数统一存储，组件销毁时批量执行即可。
  示例代码：

  // 1. 整理所有需要监听的目标元素
  const listenTargets = [
    this.elementView.nativeElement,
    this.otherElement1.nativeElement,
    this.otherElement2.nativeElement
  ]
  this._unlisten['mouseup'] = []
  
  // 2. 批量注册监听，存储销毁函数
  listenTargets.forEach(el => {
    const unlisten = this._renderer.listen(el, 'mouseup', (event) => {
      unlistenToTheEventOnSeveralElements(event)
    })
    this._unlisten['mouseup'].push(unlisten)
  })
  
  // 3. 组件销毁时批量取消监听
  ngOnDestroy() {
    this._unlisten['mouseup']?.forEach(unlistenFn => unlistenFn())
  }
  

• 方案2：事件委托（性能更优，适合同父级的多元素场景）
  如果所有需要监听的元素有共同的父元素，你可以只给父元素注册一次事件监听，触发时判断事件来源是否是目标元素即可，仅需要维护1个销毁函数，性能开销更低。
  示例代码：

  this._unlisten['mouseup'] = this._renderer.listen(
    this.parentElement.nativeElement, // 共同父元素
    'mouseup',
    (event) => {
      const targetElements = [
        this.elementView.nativeElement,
        this.otherElement1.nativeElement
      ]
      // 仅触发目标元素对应的逻辑
      if (targetElements.includes(event.target)) {
        unlistenToTheEventOnSeveralElements(event)
      }
    }
  )
  

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