Angular框架中event与$event的区别及使用规则是什么？

二者并非仅为命名约定，有完全不同的作用域和强制规则，具体区别如下：

1. $event：框架约定的模板专属变量 #

• $event 是 Angular 官方规定的固定变量名，仅能在模板的事件绑定语句中使用，用来接收两类事件数据：原生 DOM 事件对象、子组件通过 EventEmitter 抛出的自定义事件载荷。
• 模板中必须使用这个名称才能拿到事件数据，如果替换为 event 或其他名称，Angular 会尝试读取当前组件实例上的同名属性，不会自动注入事件对象，导致取值报错。

示例（模板代码）：

<!-- 接收原生点击事件对象 -->
<button (click)="handleBtnClick($event)">提交</button>
<!-- 接收子组件抛出的自定义事件数据 -->
<app-uploader (uploadFinish)="handleUploadResult($event)"></app-uploader>

2. event：组件类的自定义形参名 #

• 我们常写的 event 是组件类事件处理函数的入参名，属于纯命名约定，没有任何强制限制，你可以根据偏好替换为 e、evt、uploadResult 等任意合法变量名，只要和模板传入的$event数据结构匹配即可。

示例（组件类代码）：

// 这里的event是自定义形参，对应模板传入的$event对象
handleBtnClick(event: MouseEvent) {
  console.log('点击位置坐标：', event.clientX, event.clientY)
}

// 换成其他名称完全不影响运行
handleUploadResult(uploadData: {fileUrl: string, fileSize: number}) {
  this.previewUrl = uploadData.fileUrl
}

最佳实践建议 #

• 模板事件绑定固定使用 $event 接收事件数据，符合官方约定，降低团队协作维护成本
• 组件类的事件处理函数形参建议统一命名风格，通用场景用event，业务属性强的场景可以根据数据含义命名，提升代码可读性
• 如果业务逻辑不需要用到事件对象本身，无需传递$event，直接调用处理函数即可

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