如何无需手动跟踪获取自定义事件监听元素列表或自动分发事件？

好问题！其实浏览器原生就提供了成熟的机制，让你完全不用手动维护监听元素列表，也不需要逐个调用回调——所有注册了自定义事件的监听者都会被自动触发，和原生事件（比如input、click）的工作逻辑完全一致。

核心方案：使用原生CustomEvent + dispatchEvent #

浏览器内部会自动为每个元素维护事件监听列表，当你调用dispatchEvent触发自定义事件时，浏览器会自动遍历该元素（以及冒泡链上的父元素）的对应监听列表，触发所有匹配的回调函数，完全不需要你手动跟踪。

举个简单的例子：

// 1. 创建自定义事件（可以携带自定义数据）
const userUpdatedEvent = new CustomEvent('user-updated', {
  detail: { userId: 123, name: 'Alice' }, // 自定义数据放在detail里
  bubbles: true, // 允许事件冒泡到父元素（可选）
  cancelable: true // 允许监听者取消事件（可选）
});

// 2. 在目标元素上分发事件
document.querySelector('.user-card').dispatchEvent(userUpdatedEvent);

// 3. 任何地方注册的监听者都会自动触发
document.querySelector('.user-card').addEventListener('user-updated', (e) => {
  console.log('用户信息更新:', e.detail.name);
});

// 父元素的监听者也能收到（因为bubbles设为true）
document.body.addEventListener('user-updated', (e) => {
  console.log('全局捕获用户更新事件:', e.detail.userId);
});

为什么你会觉得需要手动跟踪？ #

可能是之前对自定义事件的机制有误解——原生事件系统已经帮我们封装了监听列表的管理和回调触发逻辑，不需要重复造轮子。你提到的textarea.addEventListener('input', ...)这种场景，本质和自定义事件是一样的：当浏览器触发input事件时，也是自动遍历所有注册的监听者并执行，完全不需要手动处理。

额外技巧：跨Shadow DOM的事件传递 #

如果你的项目用到了Web Components，想要让自定义事件穿过Shadow DOM边界，可以在创建CustomEvent时加上composed: true参数：

const crossShadowEvent = new CustomEvent('cross-shadow-event', {
  detail: { msg: '来自Shadow DOM的消息' },
  bubbles: true,
  composed: true
});

这样外部的监听者也能捕获到Shadow DOM内部触发的自定义事件。

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