Angular 8 中的事件绑定

17 Mar 2025 | 阅读 2 分钟

在Angular 8中，事件绑定用于处理从DOM触发的事件，例如按钮点击，鼠标移动等。当DOM事件发生时（例如，点击，更改，键盘抬起），它会调用组件中指定的方法。在以下示例中，当单击按钮时，会调用组件中的 cookBacon() 方法

例如

事件绑定示例

让我们在HTML模板中添加一个按钮，并处理此按钮的点击事件。要实现事件绑定，我们将把按钮的点击事件与组件的方法绑定。

现在，打开 app.component.ts 文件并使用以下代码

import { Component } from '@angular/core';  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {    
  onSave($event){  
    console.log("Save button is clicked!", $event);  
  }  
}  

app.component.html

<h2> Event Binding Example</h2>
<button (click)="onSave($event)">Save</button> <!--Event Binding-->

输出

点击“保存”按钮并打开控制台查看结果。

现在，你可以看到“保存”按钮被点击了。

事件冒泡

事件冒泡用于指定一个顺序，当一个元素嵌套在第二个元素中，并且两个元素都为同一事件（例如点击）注册了侦听器时，将按照这个顺序调用事件处理程序。

让我们看看上面的按钮示例。在这里，我在组件HTML中的按钮周围使用了一个div包装器，并且div也有一个点击事件处理程序。这只是为了在点击div时显示一些消息。

在 app.component.ts 文件中使用以下代码

import { Component } from '@angular/core';  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {    
  onSave($event){  
    console.log("Save button is clicked!", $event);  
  }  
  onDivClick(){  
    console.log("DIV is clicked!");  
  }  
}  

app.component.html

<h2>Event Bubbling Example</h2>  
<!-- Event Bubbling -->  
<div (click)="onDivClick()">  
  <button (click)="onSave($event)">Save</button>  <!-- Event Binding -->  
</div>