Web组件自定义事件命名选型：2023年DOM Level 2兼容性仍需重视？

一、DOM Level 2兼容性的现状 #

2023年完全不需要过度顾虑DOM Level 2的限制。虽然DOM Level 2的事件规范未明确允许事件名包含大写字母，但DOM Level 3在2004年就已正式定义，主流浏览器（Chrome、Firefox、Safari、Edge等）至少近10年都全面支持带大写字母的自定义事件名。目前仍在使用不支持DOM Level 3的老旧浏览器（如IE8及以下）的用户占比几乎可以忽略，尤其是企业内部系统，通常都会要求员工使用现代浏览器，因此DOM Level 2的兼容性问题无需作为核心考量因素。

二、四种命名方案的优劣对比及推荐 #

结合你提到的StencilJS开发场景，针对常见命名方案分析如下：

• 驼峰式（camelCase）：accordionTimerMouseEnterActive
  优势：与JavaScript/TypeScript的变量、函数命名风格一致，在组件代码中监听事件时（如addEventListener、Stencil的@Listen装饰器），风格统一，减少上下文切换成本。
  劣势：原生HTML模板中直接绑定的写法可读性较差，但Stencil支持在模板中用驼峰式绑定（如@onAccordionTimerMouseEnterActive="handleEvent"），可规避该问题。

• 烤肉串式（kebab-case）：accordion-timer-mouse-enter-active
  优势：符合HTML属性命名习惯，与原生DOM事件（如mouseenter、input）的视觉风格更贴近，在HTML模板中绑定事件时可读性更高（如<my-accordion onaccordion-timer-mouse-enter-active="handleEvent()"></my-accordion>）。Stencil默认会将驼峰式的事件属性自动转换为烤肉串式的事件名，无需手动配置eventName，减少代码冗余。
  劣势：在JS/TS代码中监听时，需要输入带短横线的字符串，与代码整体风格略有割裂。

• 全小写无分隔：accordiontimermouseenteractive
  完全不推荐，可读性极差，后期维护成本极高。

• 帕斯卡式（PascalCase）：AccordionTimerMouseEnterActive
  不推荐，这种命名风格通常用于类、组件定义，会与组件类名混淆，不符合事件名的通用惯例。

三、最终建议 #

如果你的团队更偏向保持JS/TS代码风格的一致性，驼峰式命名完全可行，没有兼容性问题，只需在团队规范中明确统一即可。如果希望更贴合HTML的生态习惯，或者想利用Stencil的默认转换规则减少手动配置，烤肉串式会是更省心的选择。

核心原则是：团队内部统一命名规则，避免同一项目中混用多种风格，这比纠结单一风格的优劣更重要。

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