Angular - 事件繫結

Angular 提供了監聽和觸發典型 Web 應用中每個使用者發起的事件的操作選項。事件繫結是針對 HTML 元素/元件中的事件併為目標事件設定響應程式的過程。一旦事件觸發，響應程式就會執行。

讓我們學習如何在本章中監聽和響應事件。

語法

可以透過在括號 (()) 內包含事件名稱並分配模板語句來為 HTML 元素/元件設定事件。一旦使用者觸發事件，模板語句就會執行。為事件設定操作的通用語法如下：

(<event_name>)="template statement"

監聽按鈕點選事件的語法如下：

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

讓我們建立一個按鈕，併為按鈕的點選事件設定一個操作。

**步驟1：**建立一個提交按鈕

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

**步驟2：**在元件中建立一個操作方法

myAction() {
   alert('I am the action function for click event');
}

**步驟3：**將我們的 myAction() 繫結到按鈕的點選事件，如下所示：

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

現在，每當使用者點選提交按鈕時，myAction() 都會執行。

事件物件 ($event)

事件物件包含有關觸發事件傳送到響應操作的目標和事件的資料。Angular 在模板上下文中將任何事件的事件物件公開為由 $event 表示的物件。

**步驟1：**要獲取按鈕點選事件的事件物件，請在模板中使用 $event 物件，如下所示：

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

**步驟2：**修改元件中的操作 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(.)>

這裡，

修飾鍵表示 Shift、Alt 和 Ctrl
鍵碼錶示目標鍵盤程式碼，例如字母、數字等，如 HTML 規範中所指定。例如，keydown.shift.t
事件程式碼表示 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

**步驟3：**接下來，開啟登錄檔單元件的模板，並新增一個包含使用者名稱、密碼和確認密碼的表單。

<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 樣式化表單，如下所示：

.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.component.html 中包含我們的登錄檔單元件

<app-register-form />

**步驟6：**執行應用程式並檢查輸出。

**步驟7：**讓我們在元件中新增一個方法來捕獲提交事件並阻止表單提交

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

**步驟8：**開啟模板並使用事件繫結為點選事件設定方法。

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

**步驟9：**元件的完整列表如下：

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

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

**步驟10：**元件模板的完整列表如下：

<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：**執行應用程式並檢查輸出。點選按鈕不會提交表單，因為它被攔截並使用事件繫結阻止。

結論

事件繫結簡化了典型 Web 應用中的基於事件的程式設計。它允許鍵盤、滑鼠和觸控事件。它提供了目標元素及其事件的詳細資訊。

列印頁面