今天我們要來學習 Angular 第三種資料繫結的方法：事件繫結(Event binding)。

我們要達成的目標是，點擊網頁上的圖片，然後標題會隨之改變。

因此，我們要在 HTML 的 img 標籤上，宣告一個 click 事件，語法如下：

透過 onclick 這個語法，就可以為圖片增加一個 click 事件，不過在 Angular 裡面，事件繫結的方法有兩種，先說明第一種，就是要把 onclick 加上 - 改寫成 on-click。

一般的情況，在 " " 裡頭應該放入一個 function，不過 Angular 裡頭並沒有 function，來到 AppComponent 的檔案中，我們可以看到 Angular 只有類別（class），而類別裡面只有屬性及方法。

所以，現在我們就是要新增一個方法。

新增完方法後，只要把方法的名稱複製下來，貼到 HTML img 標籤的 on-click 後面的 " " 裡頭，事件繫結(Event binding) 就完成了。

我們打開網頁，點擊圖片驗證一下，確實得到了我們要的結果。

我們剛才完成的動作，整個流程如下：

• 1. 我們在 img 上，執行了一個 click 動作。
• 2. 然後我們在 Angular 裡註冊了一個事件繫結(Event binding)，這個事件繫結到了 changeTitle() 這個方法。
• 3. 當使用者點擊了目標 img 之後，程式就會跳到 AppComponent 去執行 changeTitle() 這個方法。
• 4. 接著 changeTitle() 這個方法會變更 this.title(this 指的是 AppComponent 這個類別)，它修改了這個類別中的 title 屬性，並把新的值 跟著 ABow 一起追劇吧！ 寫進去。而原本的標題 ABow 的追劇生活 就會因此更動了。
• 5. 我們在 Angular 應用程式中，因為實作了 文字插值(Text interpolation)，因此當 title 屬性發生變更的時候，Angular 就會幫我們管理 DOM 的狀態，將頁面中所有繫結到 title 的地方，一併更新。
     

這裡要說明第二種事件繫結的寫法，也是比較推薦的方法，就是把 on-click 改成 (click)。

這個寫法近似 屬性繫結（Property binding），差別只在屬性繫結使用 中括號[ ]，而事件繫結則使用 小括號( )，使用小括號的事件繫結寫法，也是多數 Angular 開發者會採用的。

我們切換回網頁，並打開開發人員工具，所有繫結到 title 屬性的地方確實透過 click img 都發生改變。

這裡順道提出一些使用 VS Code 在開發 Angular 應用程式時，體驗良好的地方。

• 1. 如果把方法打錯字，會出現錯誤提示。
     
• 2. 透過 intellisense 的功能，可以自動提示開發者有哪些方法可以使用。
     
• 3. 也可以透過快速鍵 ctrl + 空白鍵 或 ctrl + I 來自動開啟程式碼提示，這裡就會撈出所有可能的屬性或方法供開發者選擇。
     

  我的開發環境是 Win 10，使用 ctrl + 空白鍵 沒有作用，使用 ctrl + I 才行，這兩者都是官方快速鍵一覽表中記載的。

這幾個輔助功能，都能讓我們在開發過程中減少錯誤並提升效率，建議大家可以多多利用。

以上，就是今天關於 事件繫結(Event binding) 的說明，我們下一篇再見~