Angular事件处理全攻略：从基础到进阶的完整指南

html<!-- 模板中直接绑定 --><button (click)="handleClick($event)">点击</button> <!-- 内联表达式 --><input (input)="username = $event.target.value">

typescripthandleClick(event: MouseEvent) {  // 类型断言确保类型安全  const target = event.target as HTMLButtonElement;    // 阻止默认行为  event.preventDefault();    // 停止事件传播  event.stopPropagation();    // 获取坐标  console.log(event.clientX, event.clientY);}

html<input (keydown.enter)="onEnterKey()"><input (keydown.control.z)="handleUndo()">

typescript@Output() itemSelected = new EventEmitter<string>(); selectItem(item: string) {  this.itemSelected.emit(item);}

html<child-component (itemSelected)="handleItemSelect($event)"></child-component>

typescript// 阻止事件冒泡@HostListener('click', ['$event'])onClick(event: MouseEvent) {  event.stopPropagation();} // 捕获阶段处理@HostListener('click', ['$event'], true) // 第三个参数表示捕获阶段onCaptureClick(event: MouseEvent) {  console.log('Capture phase');}

typescriptimport { fromEvent } from 'rxjs'; ngAfterViewInit() {  fromEvent(this.myButton.nativeElement, 'click')    .pipe(      throttleTime(1000),      filter(e => e.ctrlKey)    )    .subscribe(event => this.handleCtrlClick());}

typescripttrackByFn(index: number, item: any): number {  return item.id; // 唯一标识符}

typescript// 推荐<button (click)="handleClick()"> // 避免（每次变更检测都会创建新函数）<button (click)="handleClick(item.id)">

typescriptprivate subscriptions = new Subscription(); ngOnInit() {  this.subscriptions.add(    fromEvent(window, 'resize').subscribe(...)  );} ngOnDestroy() {  this.subscriptions.unsubscribe();}

typescriptimport { debounceTime } from 'rxjs/operators'; fromEvent(window, 'resize').pipe(  debounceTime(300)).subscribe(...);