Angular中的事件是什么？

封面图 • 2026-03-28 • Angular

在 **Angular** 中，**事件**（Event）是指用户与应用程序进行交互时触发的某些动作，比如点击按钮、输入文本、鼠标移动等。Angular 提供了一种机制来监听和响应这些事件，使得开发者可以轻松地处理用户的操作。

---

## 一、Angular 事件的基本概念

在 Angular 中，事件是通过 **模板绑定** 来处理的，主要使用 **事件绑定语法**，格式如下：

```html
(事件名)="表达式"
```

例如：

```html
<button (click)="onButtonClick()">点击我</button>
```

这里的 `(click)` 是一个事件绑定，当用户点击按钮时，会调用组件中的 `onButtonClick()` 方法。

---

## 二、常见的 Angular 事件类型

| 事件类型 | 说明 |
|----------|------|
| `(click)` | 鼠标点击事件 |
| `(keydown)` | 键盘按键按下 |
| `(keyup)` | 键盘按键释放 |
| `(input)` | 输入框内容变化（如 `<input>` 或 `<textarea>`） |
| `(change)` | 表单控件值改变（如 `<select>`、`<input type="checkbox">`） |
| `(submit)` | 表单提交 |
| `(mouseenter)` / `(mouseleave)` | 鼠标进入/离开元素 |
| `(focus)` / `(blur)` | 元素获得/失去焦点 |

---

## 三、事件绑定示例

### 示例 1：点击事件

```html

<button (click)="onClick()">点击我</button>
```

```ts
// 组件 TS 文件
export class MyComponent {
  onClick() {
    console.log('按钮被点击了！');
  }
}
```

### 示例 2：输入事件

```html
<input (input)="onInput($event)">
```

```ts
onInput(event: Event) {
  const value = (event.target as HTMLInputElement).value;
  console.log('输入内容：', value);
}
```

---

## 四、事件对象

Angular 的事件绑定中，可以通过 `$event` 获取事件对象，例如：

```html
<input (input)="handleInput($event)">
```

然后在组件中：

```ts
handleInput(event: Event) {
  console.log('事件类型:', event.type);
  console.log('目标元素:', event.target);
}
```

> 注意：`$event` 是 Angular 提供的特殊变量，代表事件对象。

---

## 五、事件冒泡与阻止

在 Angular 中，你可以通过 `event.stopPropagation()` 来阻止事件冒泡，或通过 `event.preventDefault()` 来阻止默认行为。

```html
<div (click)="parentClick()">
  <button (click)="childClick($event)">子按钮</button>
</div>
```

```ts
parentClick() {
  console.log('父元素被点击');
}

childClick(event: Event) {
  event.stopPropagation(); // 阻止事件冒泡到父元素
  console.log('子按钮被点击');
}
```

---

## 六、自定义事件（使用 @Output()）

如果你需要从子组件向父组件传递事件，可以使用 `@Output()` 装饰器。

```ts
// 子组件
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="onButtonClicked()">点击</button>`
})
export class ChildComponent {
  @Output() customEvent = new EventEmitter<string>();

onButtonClicked() {
    this.customEvent.emit('Hello from child');
  }
}
```

```ts
// 父组件
<app-child (customEvent)="handleCustomEvent($event)"></app-child>

handleCustomEvent(message: string) {
  console.log('收到子组件事件:', message);
}
```

---

## 七、总结

- Angular 的事件是通过 **事件绑定语法**（`(event)`）来处理的。
- 常见的事件包括 `click`、`input`、`change`、`submit` 等。
- 事件对象通过 `$event` 传入方法中。
- 可以使用 `stopPropagation()` 和 `preventDefault()` 控制事件行为。
- 使用 `@Output()` 实现子组件向父组件传递事件。

如果你有具体的场景或想了解某个特定事件的用法，欢迎继续提问！