基礎認識
在寫 jQuery 或是原生 JS 的點擊事件會使用下方來撰寫點擊事件。
1
| <button class="btn" onclick="click()">點擊按鈕</button>
|
Angular 的寫法
on-click
最簡單的 Angular 設定點擊方法，就是將把 onclick 改寫成 on-click，就可以了，
1
| <button class="btn" on-click="clickBtn()">點擊按鈕</button>
|
並且對應 component 的內容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| 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)
實務上更推薦也是大部分開發者會使用的寫法，可讀性更高，更好維護：
1
| <button class="btn" (click)="clickBtn()">點擊按鈕</button>
|
使用 $event 參數
一般在註冊事件的時候不需帶入參數，但透過 $event 參數可以得知更詳細的資訊。
1
| <button class="btn" (click)="clickBtn($event)">點擊按鈕</button>
|
透過 console.log 去得到 $event 的值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| 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 下的滑鼠事件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| 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。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| 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");
}
console.log($event);
}
}
|
因 Angular 是使用 TS 開發，而 TS 是強型別的語言，VScode 再開發時也支援這個功能，滑鼠移動到 altKey 會看到說明為布林值，所以也可以重構程式碼變得更簡潔。
1
| <button class="btn" (click)="clickBtn($event.altKey)">點擊按鈕</button>
|
已將標籤的事件參數加上 altKey 事件，再將 component 改寫成下方樣子，變得可讀性更高。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| 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) {
console.log("click altKey");
}
}
}
|
當然，沒有最好的寫法，只有最適合的寫法，選擇好維護的寫法，在未來維護或共同協作上更順利，就是最棒的寫法了！