基礎認識

在寫 jQuery 或是原生 JS 的點擊事件會使用下方兩種方式來撰寫點擊事件。

<button class="btn" onclick="click()">點擊按鈕</button>

Angular 的寫法

on-click

最簡單的 Angular 設定點擊方法，就是將把 onclick 改寫成 on-click，就可以了，

<button class="btn" on-click="clickBtn()">點擊按鈕</button>

並且對應 component 的內容：

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  constructor() {}

  clickBtn() {
    alert("click");
  }
}

(click)

實務上更推薦也是大部分開發者會使用的寫法，可讀性更高，更好維護：

<button class="btn" (click)="clickBtn()">點擊按鈕</button>

使用 $event 參數

一般在註冊事件的時候不需帶入參數，但透過 $event 參數可以得知更詳細的資訊。

<button class="btn" (click)="clickBtn($event)">點擊按鈕</button>

透過 console.log 去得到 $event 的值。

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  constructor() {}

  clickBtn($event) {
    console.log($event);
  }
}

當點擊按鈕後，透過開發人員工具可以看到許多詳細資訊，所得到的 event 就是 DOM 下的滑鼠事件。

MouseEvent {isTrusted: true, screenX: 39, screenY: 122, clientX: 39, clientY: 19, …}
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 39
clientY: 19
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 39
layerY: 19
metaKey: false
movementX: 0
movementY: 0
offsetX: 29
offsetY: 9
pageX: 39
pageY: 19
path: (6) [button.btn, app-root, body, html, document, Window]
relatedTarget: null
returnValue: true
screenX: 39
screenY: 122
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: button.btn
target: button.btn
timeStamp: 10022.204999811947
toElement: button.btn
type: "click"
view: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
which: 1
x: 39
y: 19
__proto__: MouseEvent

假設今天要設定按下 ALT/option 鍵，在點擊滑鼠產生事件可以寫一個判斷式，當我按下 Alt 鍵再點擊滑鼠時，就會得到預期的結果，並且在滑鼠事件會得到的 altKey:true。

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  constructor() {}

  clickBtn($event: MouseEvent) {
    if ($event.altKey) {
      console.log("click altKey"); // click altKey
    }
    console.log($event); // 得到滑鼠事件
  }
}

因 Angular 是使用 TS 開發，而 TS 是強型別的語言，VScode 再開發時也支援這個功能，滑鼠移動到 altKey 會看到說明為布林值，所以也可以重構程式碼變得更簡潔。

<button class="btn" (click)="clickBtn($event.altKey)">點擊按鈕</button>

已將標籤的事件參數加上 altKey 事件，再將 component 改寫成下方樣子，變得可讀性更高。

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  constructor() {}

  clickBtn(altKey: boolean) {
    if (altKey) {
      // 當 altKey 為 true
      console.log("click altKey"); // click altKey
    }
  }
}

當然，沒有最好的寫法，只有最適合的寫法，選擇好維護的寫法，在未來維護或共同協作上更順利，就是最棒的寫法了！