笙亿网络策划

Angular 事件绑定怎么用？

约 13 分钟读完 1 阅
文章导读
Previous Quiz Next Angular 提供了在典型 Web 应用程序中监听和触发每个用户发起事件的选项。事件绑定 是针对 HTML 元素/组件中的事件并为其设置响应器的过程。一旦事件被触发，响应器就会执行。
📋 目录
  1. 一 如何使用事件绑定？
  2. 二 示例 - 事件绑定
  3. 三 事件对象 ($event)
  4. 四 事件类型
  5. 五 实现事件绑定
  6. 六 结论
A A

Angular - 事件绑定

Previous
Quiz
Next

Angular 提供了在典型 Web 应用程序中监听和触发每个用户发起事件的选项。事件绑定 是针对 HTML 元素/组件中的事件并为其设置响应器的过程。一旦事件被触发，响应器就会执行。

在本教程中，我们将了解事件绑定。

如何使用事件绑定？

可以通过在括号 (( )) 中包含事件名称并分配一个模板语句，为 HTML 元素/组件设置事件。用户触发事件时，该模板语句就会执行。为事件设置动作的通用语法如下：

(<event_name>)="template statement"

监听按钮点击事件的语法如下：

<button (click)="template statement">Click here</button>

示例 - 事件绑定

让我们创建一个按钮，并为按钮的点击事件设置一个动作。

步骤 1： 创建一个提交按钮。

<button type="submit>Submit</button>

步骤 2： 在组件中创建一个动作方法。

myAction() {
   alert('我是点击事件的动作函数');
}

步骤 3： 如以下所示，将我们的 myAction() 方法绑定到按钮的点击事件 −

<button type="submit" (click)="myAction()">Submit</button>

现在，每当用户点击提交按钮时，myAction() 就会执行。

事件对象 ($event)

事件对象 包含由触发事件发送到响应动作的目标和事件数据。Angular 在模板上下文中通过 $event 表示的对象暴露任何事件的事件对象。

要获取按钮点击事件的事件对象，可以使用模板中可用的 $event 对象，如下所示 −

<button type="submit" (click)="myAction($event)">Submit</button>

现在，修改组件中的动作 myAction() 以使用 $event 对象，如下所示 −

myAction(e) {
   e.preventDefault()
}

这里，preventDefault() 是 HtmlButtonElement 事件对象中可用的方法，用于抑制按钮事件的内置动作，例如提交表单。

事件类型

Angular 支持 Web 应用程序中的所有事件，这些事件按其来源和用法进行分类。事件类型如下：

  • 鼠标事件
  • 基于键盘的事件
  • 基于触摸的事件
  • 基于文档的事件

让我们逐一简要学习它们。

基于鼠标的事件

基于鼠标的事件是由鼠标操作（如点击、滚动、移动、拖拽等）触发的事件。此类别中一些最重要的イベント及其 Angular 事件绑定目标名称如下所示 −

  • 单击 - (click)
  • 双击 - (dblclick)
  • 鼠标按下 - (mousedown)
  • 鼠标释放 - (mouseup)
  • 鼠标进入元素 - (mouseenter)
  • 鼠标离开元素 - (mouseleave)
  • 滚动块 - (scroll)
  • 按住并拖拽元素 - (drag)
  • 按住并放置元素 - (drop)
  • 拖拽事件经过目标放置事件 - (dragover)

基于键盘的事件

基于键盘的事件是用户操作键盘时触发的事件。此类别中一些最重要的イベント如下所示 −

  • 按下按键 - (keydown)
  • 释放按键 - (keyup)
  • 按下字符键 - (keypress)
  • 聚焦元素 - (focus)
  • 取消聚焦元素 - (blur)
  • 按下特定按键或按键组合，如 Shift + T (keydown.shift.t)

针对特定按键按下的イベント可以使用以下格式实现：

keydown.<modifier_key>.<key_code>
keydown.<key_code>
keydown.code.<event code separated by dot(.)>

其中，

  • Modifier_key 表示 shift、alt 和 control

  • Key_code 表示目标键盘代码，如字母、数字等，按照 HTML 规范指定。例如，keydown.shift.t

  • Event code 表示按照 HTML 规范指定的イベント代码，如 keyT、Tab 等

例如，同时按下 Shift 键 和 T 可以按以下方式针对：

<div (keydown.shift.t)="alert('Shift + T')">
   <!-- content -->
</div>

基于触摸的事件

基于触摸的事件是用户通过触摸设备交互时触发的事件。此类别中一些最重要的イベント如下所示 −

  • 在触摸设备上指向元素并开始移动 - (touchstart)

  • 在触摸设备上指向元素并移动 - (touchmove)

  • 在触摸设备上指向元素并停止移动 - (touchend)

基于 Web 文档的事件

基于 Web 文档的事件是在 Web 文档中触发以执行剪切、复制和粘贴文本、提交表单等操作的特定事件。此类别中一些最重要的イベント如下所示 −

  • 点击提交按钮提交表单 - (submit)

  • 将文本复制到剪贴板 - (copy)

  • 从剪贴板粘贴文本 - (paste)

  • 删除并将一段文本复制到剪贴板 - (cut)

实现事件绑定

让我们创建一个简单的注册表单来理解事件绑定。我们的注册表单将包含以下三个输入字段和一个提交注册表单的按钮。

  • 用户名
  • 密码
  • 确认密码

步骤 1: 使用 angular CLI 创建一个新的应用 my-app，如下所示 −

ng new my-app

步骤 2: 使用 angular CLI 创建一个新的注册表单组件 RegisterForm，如下所示 −

ng generate component RegisterForm
CREATE src/app/register-form/register-form.spec.ts (597 bytes)
CREATE src/app/register-form/register-form.ts (224 bytes)
CREATE src/app/register-form/register-form.css (0 bytes)
CREATE src/app/register-form/register-form.html (29 bytes)

步骤 3: 接下来，打开注册表单组件的模板，添加包含用户名、密码和确认密码的表单。

register-form.html

<div>
   <form method="post">
      <div class="container">
         <label for="username"><b>Username</b></label>
         <input type="text" name="username" required>
      
         <label for="password"><b>Password</b></label>
         <input type="password" name="password" required>
      
         <label for="confirm_password"><b>Confirm Password</b></label>
         <input type="password" name="confirm_password" required>
      
         <button type="submit">Register</button>
      </div>
   </form>
</div>

步骤 4: 打开注册表单组件的 CSS 样式文件，并使用以下 CSS 对表单进行样式设置 −

register-form.css

.container {
   padding: 15px;
}

input[type=text], input[type=password] {
   width: 100%;
   padding: 10px 20px;
   margin: 10px 0;
   display: inline-block;
   border: 1px solid #ccc;
   box-sizing: border-box;
}

button {
   background-color: blue;
   color: white;
   padding: 15px 20px;
   margin: 10px 0;
   border: none;
   cursor: pointer;
   width: 100%;
}

步骤 5: 将我们的注册表单组件包含在应用模板文件 app.html 中。

<app-register-form />

步骤 6: 将我们的注册表单组件包含在应用文件 app.ts 中。

import { Component, signal } from '@angular/core';
import { RegisterForm } from './register-form/register-form';

@Component({
   selector: 'app-root',
   imports: [RegisterForm],
   templateUrl: './app.html',
   styleUrl: './app.css'
})
export class App {
   protected readonly title = signal('myApp');
}

步骤 7: 让我们在组件中添加一个方法来捕获提交事件并阻止表单提交。

registerAccount(e: Event) {
   e.preventDefault();
   alert('The form submission is prevented');
}

步骤 8: 打开模板，使用事件绑定为点击事件设置方法。

<button type="submit" (click)="registerAccount($event)">Register</button>

步骤 9: 组件的完整代码如下所示：

register-form.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-register-form',
  imports: [],
  templateUrl: './register-form.html',
  styleUrl: './register-form.css',
})
export class RegisterForm {
   registerAccount(e: Event) {
      e.preventDefault();
      alert('The form submission is prevented');
   }
}

步骤 10: 组件模板的完整代码如下所示：

register-form.html

<div>
   <form method="post">
      <div class="container">
         <label for="username"><b>Username</b></label>
         <input type="text" name="username" required>
      
         <label for="password"><b>Password</b></label>
         <input type="password" name="password" required>
      
         <label for="confirm_password"><b>Confirm Password</b></label>
         <input type="password" name="confirm_password" required>
      
         <button type="submit" (click)="registerAccount($event)">Register</button>
      </div>
   </form>
</div>

步骤 11: 运行应用并检查输出。点击按钮不会提交表单，因为它被事件绑定拦截并阻止了。

Application Using Event Binding

结论

事件绑定简化了典型 Web 应用程序中的基于事件编程。它支持键盘、鼠标和触摸事件。它提供了目标元素及其事件详细信息。