当前位置: 首页 > 資訊 >

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,這個由點擊觸發的事件,裡面可以找到非常多的屬性,找幾個簡介如下:

  • altKey:代表在執行 click 動作時,有沒有按下 alt 鍵。
  • clientX:click 時,是在畫面上 X 軸哪一個 pixel 的地方點擊的,不同次的點擊,只要位置不同,數值也不同。

這些屬性都可供開發人員取用、操作。

其中,特別提出來介紹的,就是裡面的 target 屬性, $event.target 代表的就是我們剛才點擊的 img 這個 DOM 物件,展開來看就可以得到驗證,而裡頭可以得到關於這個 img 的資訊,如:圖片大小、src 的位置…等。

接下來,我們要透過 $event 中的資訊,來改寫程式碼,我們把原本 click 觸發的更改標題事件,加上另一個條件,就是點擊的同時要按下 shift 鍵,才會觸發更改標題,程式碼寫法如下:

接著我們來到頁面,真接點擊圖片,標題原封不動,要按著 shift 鍵並點擊 img,標題才會出現改動。在 $eventshiftKey 屬性也可以看到已變更為 true,代表我們 click 時有按下 shift 鍵。

這裡要特別提醒的是,這些 property 是有區分大小寫的,如:shiftKey 的 K 為大寫,如果打成小寫,可是不會有作用的!

所以,我們知道了一件事,透過 $event 參數的傳入,可以有非常多的應用,下一篇我們會再介紹更推薦的做法。