# Day07 【牙起來】 繫結2 事件綁定 - 程式面介紹

繼續前一篇文章綁定成員

不過在此之前我想在遊戲中，替角色添加**攻擊力**屬性

修改 `role.component.ts` 檔案

...

export class RoleComponent implements OnInit {
  name = '初心冒險者';
  hp = 5;
  atk = 1;

  constructor() { }

  ngOnInit(): void {
    setInterval(() => {
      this.hp += 1;
    }, 1000)
  }
}

修改 `role.component.html` 樣板

<h2>角色區塊</h2>
<div>名稱: {{name}}</div>
<div>血量: {{hp}}</div>
<div>攻擊力: {{atk}}</div>
<button>點我增加攻擊力</button>

目前畫面上有攻擊力了
我想要透過手動方式來**增加攻擊力**，每點擊一次攻擊力+1
於是有了一顆按鈕，只是目前點擊不會有任何反應

### 事件繫結 Event Binding

#### 滑鼠點擊事件 onClick - `(click)`

我們在程式的class內加上一個 **function**: 增加攻擊力`addAtk()`
實作一個**增加攻擊力的方法**出來

> 其實在這使用 **函式 function** 稱呼其實不準確，正確來說是物件底下的 **方法 method**
> 後面講到Typescript章節時會重新提及，在此請先忽略

修改 `role.component.ts`

...

export class RoleComponent implements OnInit {
  name = '初心冒險者';
  hp = 5;
  atk = 1;

  constructor() { }

  ngOnInit(): void {
    setInterval(() => {
      this.hp += 1;
    }, 1000)
  }

  addAtk() {
    this.atk += 1;
  }
}

修改 `role.component.html` 樣板
在`<button>`身上掛上一個`(click)`，代表被點擊時會觸發，等同於Javascript中的`onclick()`事件。讓他點擊之後去觸發程式內的`addAtk()`function

<h2>角色區塊</h2>
<div>名稱: {{name}}</div>
<div>血量: {{hp}}</div>
<div>攻擊力: {{atk}}</div>
<button (click)="addAtk()">點我增加攻擊力</button>

完成結果畫面


當然，`(click)`事件不一定都要綁在`<button>`
也可以綁在`<div>`上玩玩看

#### 鼠標停留事件 onHover - `(mouseEnter)`、`(mouseLeave)`

Javascript的事件有很多種，當然Angular內建的事也有百百種囉

再來做一個小功能
當鼠標遮住玩家名稱時，自動改變顯示的名稱
這時就會用到Angular中的**MouseEnter**、**MouseOver**事件

修改 `role.component.html` 樣板

<h2>角色區塊</h2>
<div (mouseenter)="changeName1()" (mouseleave)="changeName2()">名稱: {{name}}</div>
<div>血量: {{hp}}</div>
<div>攻擊力: {{atk}}</div>
<button (click)="addAtk()">點我增加攻擊力</button>

接著在 `role.component.ts` 的Class中放入以下兩個function
用來**改變玩家名字**的字串

...

  changeName1() {
    this.name = "勇者，你的游標擋到我名字了";
  }

  changeName2() {
    this.name = "謝謝，你很識相。";
  }

當網頁偵測到游標停留在 `<div>` 元素區塊上方時，就會去做指定的function

大功告成～

> 恭喜到這一步，已經學了**48%的Angular**！