Angular 提供了一整套事件处理机制，使得开发者能够轻松地在应用中处理用户交互、生命周期钩子、表单验证等事件。与传统的 JavaScript 和 HTML 事件处理方式不同，Angular 提供了一些特有的机制和语法，帮助开发者以声明式的方式处理事件。
1. 事件绑定：(event)
在 Angular 中，事件绑定通常通过 圆括号 () 来实现，事件名称会放在括号内，事件处理函数放在括号外。通过这种语法，你可以将 DOM 事件（如 click、keydown、submit 等）绑定到组件中的方法。
1.1 基本事件绑定
<button (click)="onClick()">Click Me</button>
在这个示例中，当用户点击按钮时，onClick() 方法会被调用。onClick() 方法需要在组件中定义。
@***ponent({
selector: 'app-root',
templateUrl: './app.***ponent.html',
})
export class App***ponent {
onClick() {
console.log('Button clicked!');
}
}
1.2 事件绑定的参数传递
在事件绑定中，你还可以将事件对象传递给事件处理函数。例如，当处理 click 事件时，你可以获取点击事件的详细信息。
<button (click)="onClick($event)">Click Me</button>
onClick(event: MouseEvent) {
console.log(event); // MouseEvent对象
console.log('Button clicked!');
}
-
$event是一个内置的变量，代表事件对象。你可以访问所有的事件信息（例如MouseEvent对象中的clientX、clientY属性）。
1.3 事件修饰符
Angular 还支持一些事件修饰符，用来增强事件处理的功能。例如，常见的修饰符有：
-
$event.preventDefault()：阻止默认行为。 -
$event.stopPropagation()：阻止事件冒泡。
<button (click)="onClick($event)">Click Me</button>
onClick(event: MouseEvent) {
event.preventDefault(); // 阻止默认行为
event.stopPropagation(); // 阻止事件冒泡
console.log('Button clicked!');
}
2. 事件处理中的自定义事件
在 Angular 中，你还可以创建自定义事件，特别是在子组件中，子组件可以向父组件发出事件，父组件接收并处理该事件。
2.1 通过 @Output() 和 EventEmitter 发送事件
子组件可以通过 @Output() 和 EventEmitter 向父组件发送事件。当父组件在模板中绑定子组件时，子组件通过 EventEmitter 触发事件，父组件可以捕获并处理该事件。
子组件（child.***ponent.ts）：
import { ***ponent, EventEmitter, Output } from '@angular/core';
@***ponent({
selector: 'app-child',
template: `<button (click)="sendEvent()">Click to send event</button>`
})
export class Child***ponent {
@Output() customEvent = new EventEmitter<string>();
sendEvent() {
this.customEvent.emit('Hello from child!');
}
}
父组件（parent.***ponent.html）：
<app-child (customEvent)="handleEvent($event)"></app-child>
父组件（parent.***ponent.ts）：
@***ponent({
selector: 'app-parent',
templateUrl: './parent.***ponent.html',
})
export class Parent***ponent {
handleEvent(message: string) {
console.log(message); // 输出：Hello from child!
}
}
-
@Output()将customEvent作为事件输出到父组件。 - 父组件通过
(customEvent)捕获并处理该事件，$event用来获取事件传递的值。
3. 模板中处理事件
除了直接绑定方法外，Angular 还支持通过模板表达式处理事件，可以在事件绑定时执行一些表达式。
<button (click)="count = count + 1">Click Me</button>
<p>Button clicked {{ count }} times</p>
在这个例子中，每次点击按钮时，count 会增加 1，并立即反映到视图中。
4. 键盘事件
Angular 支持各种键盘事件，如 keydown、keyup、keypress 等，你可以在模板中绑定这些事件，并使用事件对象获取按键信息。
4.1 捕获键盘事件
<input (keydown)="onKeyDown($event)" placeholder="Press a key" />
onKeyDown(event: KeyboardEvent) {
console.log(event.key); // 输出按下的键
}
- 你可以通过
KeyboardEvent对象访问按键信息，如event.key、event.code等。
5. 鼠标事件
Angular 支持标准的鼠标事件，如 click、mouseenter、mouseleave、mousedown、mouseup 等。
5.1 捕获鼠标事件
<div (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">Hover over me!</div>
onMouseEnter() {
console.log('Mouse entered the div');
}
onMouseLeave() {
console.log('Mouse left the div');
}
- 你可以使用鼠标事件来处理用户与页面的交互，例如鼠标悬停、点击等。
6. 事件的冒泡与捕获
Angular 内部处理了大部分事件的冒泡和捕获机制，但你也可以通过 stopPropagation() 和 preventDefault() 控制事件流。
-
stopPropagation()：阻止事件继续向上传播。 -
preventDefault()：阻止事件的默认行为（例如，表单提交、链接跳转等）。
<div (click)="onClick($event)">
<button (click)="onButtonClick($event)">Click Me</button>
</div>
onClick(event: MouseEvent) {
console.log('Div clicked');
event.stopPropagation(); // 阻止冒泡
}
onButtonClick(event: MouseEvent) {
console.log('Button clicked');
}
- 如果不调用
stopPropagation()，点击按钮时，onClick()也会被触发，因为事件会冒泡到父级div。
7. 事件的生命周期钩子：ngOnInit、ngOnDestroy 等
在组件的生命周期中，Angular 也会触发一些事件和钩子函数。通过生命周期钩子，开发者可以在适当的时机响应这些事件。
7.1 ngOnInit 和 ngOnDestroy
import { ***ponent, OnInit, OnDestroy } from '@angular/core';
@***ponent({
selector: 'app-lifecycle',
template: `<div>Check console for lifecycle events</div>`
})
export class Lifecycle***ponent implements OnInit, OnDestroy {
ngOnInit() {
console.log('***ponent initialized!');
}
ngOnDestroy() {
console.log('***ponent destroyed!');
}
}
-
ngOnInit：当组件初始化时调用。 -
ngOnDestroy：当组件销毁时调用。
8. 总结
Angular 提供了强大的事件绑定和处理机制，让开发者能够以声明式的方式处理用户交互和组件之间的通信。通过事件绑定、@Output() 和 EventEmitter、模板表达式等特性，Angular 的事件系统使得在应用中捕获和响应用户操作变得更加方便和高效。
