Day 24：开始来学资料系结：事件系结（一）

今天我们要来学习 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 动作。
1. 然後我们在 Angular 里注册了一个事件系结(Event binding)，这个事件系结到了 changeTitle() 这个方法。
1. 当使用者点击了目标 img 之後，程序就会跳到 AppComponent 去执行 changeTitle() 这个方法。
1. 接着 changeTitle() 这个方法会变更 this.title(this 指的是 AppComponent 这个类别)，它修改了这个类别中的 title 属性，并把新的值 跟着 ABow 一起追剧吧！ 写进去。而原本的标题 ABow 的追剧生活 就会因此更动了。
1. 我们在 Angular 应用程序中，因为实作了 文字插值(Text interpolation)，因此当 title 属性发生变更的时候，Angular 就会帮我们管理 DOM 的状态，将页面中所有系结到 title 的地方，一并更新。

这里要说明第二种事件系结的写法，也是比较推荐的方法，就是把 on-click 改成 (click)。

这个写法近似 属性系结（Property binding），差别只在属性系结使用 中括号[ ]，而事件系结则使用 小括号( )，使用小括号的事件系结写法，也是多数 Angular 开发者会采用的。

我们切换回网页，并打开开发人员工具，所有系结到 title 属性的地方确实透过 click img 都发生改变。

这里顺道提出一些使用 VS Code 在开发 Angular 应用程序时，体验良好的地方。

1. 如果把方法打错字，会出现错误提示。
1. 透过 intellisense 的功能，可以自动提示开发者有哪些方法可以使用。
1. 也可以透过快速键 ctrl + 空白键 或 ctrl + I 来自动开启程序码提示，这里就会捞出所有可能的属性或方法供开发者选择。
我的开发环境是 Win 10，使用 ctrl + 空白键 没有作用，使用 ctrl + I 才行，这两者都是官方快速键一览表中记载的。