Day 25：开始来学资料系结：事件系结（二）使用 $event 参数

前一篇我们谈到了事件系结的方法，在使用 事件系结(Event binding) 的时候，我们要先有一个事件，并使用 小刮号() 来注册，并传入一个方法，而这个方法，预设并不需要传入参数。

不过，这里其实可以传入一个参数，就是 $event，有写过 JavaScript 或 jQurey 的朋友，应该都对这个 event 参数不陌生吧！这个 $event 参数，可以协助我们取得事件的详细资讯。

首先我们在 HTML img 标签的 changeTitle() 中加入 $event。

接着到 AppComponent 里头，来改写程序码，接收 $event 参数。

这边有一点要注意，就是 $event 需要先给一个型别 any，不然会一直喷错。

接着我们就可以把 $event 的值印出来看看。

开启 chrome 的开发人员工具，点击网页上的目标图片後，在右边 Console 的地方就会把 $event 的资讯印出来了。

而 $event 所传入的是 img 这个 DOM 的 PointerEvent，这个由点击触发的事件，里面可以找到非常多的属性，找几个简介如下：

这些属性都可供开发人员取用、操作。

其中，特别提出来介绍的，就是里面的 target 属性， $event.target 代表的就是我们刚才点击的 img 这个 DOM 物件，展开来看就可以得到验证，而里头可以得到关於这个 img 的资讯，如：图片大小、src 的位置…等。

接下来，我们要透过 $event 中的资讯，来改写程序码，我们把原本 click 触发的更改标题事件，加上另一个条件，就是点击的同时要按下 shift 键，才会触发更改标题，程序码写法如下：

接着我们来到页面，真接点击图片，标题原封不动，要按着 shift 键并点击 img，标题才会出现改动。在 $event 的 shiftKey 属性也可以看到已变更为 true，代表我们 click 时有按下 shift 键。

这里要特别提醒的是，这些 property 是有区分大小写的，如：shiftKey 的 K 为大写，如果打成小写，可是不会有作用的！

所以，我们知道了一件事，透过 $event 参数的传入，可以有非常多的应用，下一篇我们会再介绍更推荐的做法。