【Angular】事件处理机制

Angular 提供了一整套事件处理机制，使得开发者能够轻松地在应用中处理用户交互、生命周期钩子、表单验证等事件。与传统的 JavaScript 和 HTML 事件处理方式不同，Angular 提供了一些特有的机制和语法，帮助开发者以声明式的方式处理事件。

1. 事件绑定：(event)

在 Angular 中，事件绑定通常通过 圆括号 () 来实现，事件名称会放在括号内，事件处理函数放在括号外。通过这种语法，你可以将 DOM 事件（如 click、keydown、submit 等）绑定到组件中的方法。

1.1 基本事件绑定

<button (click)="onClick()">Click Me</button>

在这个示例中，当用户点击按钮时，onClick() 方法会被调用。onClick() 方法需要在组件中定义。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  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.component.ts）：

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="sendEvent()">Click to send event</button>`
})
export class ChildComponent {
  @Output() customEvent = new EventEmitter<string>();

  sendEvent() {
    this.customEvent.emit('Hello from child!');
  }
}

父组件（parent.component.html）：

<app-child (customEvent)="handleEvent($event)"></app-child>

父组件（parent.component.ts）：

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  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 { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-lifecycle',
  template: `<div>Check console for lifecycle events</div>`
})
export class LifecycleComponent implements OnInit, OnDestroy {

  ngOnInit() {
    console.log('Component initialized!');
  }

  ngOnDestroy() {
    console.log('Component destroyed!');
  }
}

• ngOnInit：当组件初始化时调用。
• ngOnDestroy：当组件销毁时调用。

8. 总结

Angular 提供了强大的事件绑定和处理机制，让开发者能够以声明式的方式处理用户交互和组件之间的通信。通过事件绑定、@Output() 和 EventEmitter、模板表达式等特性，Angular 的事件系统使得在应用中捕获和响应用户操作变得更加方便和高效。