事件監聽 | Angular 新手練功日誌

今天要來介紹事件監聽，讓使用者可以與應用程式互動。

在 Angular 要與應用程式互動，會使用 () 來綁定事件監聽器，並指定事件觸發時要執行的方法。

<button type="button" (click)="onClick()">
  點擊按鈕
</button>

按鍵修飾符 key modifiers
監聽鍵盤觸發的事件，還可以繼續取得鍵盤特定鍵，例如：(keydown.enter) 代表當按下 Enter 鍵時觸發事件。

<input type="text" (keyup.enter)="onEnter($event)" />

也可以偵測特定鍵組合

<!-- 同時按下 Shift 鍵和 Enter 鍵並放開時，才會觸發 -->
<input (keyup.shift.enter)="onShiftEnter()" />

**$event** 在 Angular 模板中，當事件被觸發時，會傳遞一個 `$event` 物件給事件處理器。

$event 是 Angular 模板語法中的特殊變數，常使用的用法如下：

• 代表事件物件本身，透過這個物件，可以取得事件相關的資訊。
• 代表自訂事件傳遞的資料內容，後續文章中會介紹相關用法。

export class App {
  onItemClick(event: MouseEvent) {
    console.log('元件被點擊', event);
  }
}

<button (click)="onItemClick($event)">點我</button>

防止事件預設行為#

在某些情況下，可能需要防止事件的預設行為，例如點擊連結時不跳轉頁面，可以使用$event.preventDefault() 來達成。

<a href="javascript:;" (click)="onLinkClick($event)">
  點擊連結
</a>

export class App {
  onLinkClick(event: MouseEvent) {
    event.preventDefault();
    console.log('連結被點擊，但不跳轉');
  }
}

專案製作#

今日目標：練習繫結用法，將 header 的 icon ，改成 img 標籤。

• 建立 logo.svg
• 定義路徑
• 使用繫結綁定圖片路徑

day 8 分享

結論#

今天介紹了 Angular 的事件監聽，現在已經知道如何讓使用者可以與應用程式互動。接下來，下一篇將認識 Angular 的近年來的關鍵更新 Signal，了解它如何改變開發 Angular 應用的方式。