d3.js:數據可視化利器之 交互行爲：響應DOM事件

selection.on：事件監聽操做符

on()操做符能夠添加或移除選擇集中每一個 DOM元素的事件監聽函數：

1. selection.on(type[,listener[,capture]])

參數type是一個DOM事件類型字符串，指明要監聽的事件，如： "click"、 "mouseover"、 "submit"等，可使用瀏覽器支持的任何事件類型。

參數capture是可選的，對應於W3C的useCapture標誌。

獲取/移除當前監聽函數

參數listener是可選的，若是未指定該參數，則on()調用返回 type類型的當前監聽函數。

要移除一個事件監聽，將listener參數置爲null便可。

爲事件註冊監聽函數

參數listener是一個監聽函數，當d3捕捉到DOM事件後，將調用該監聽函數， 並忽略該函數的返回值。監聽函數也是一個訪問器，d3觸發監聽函數時， 將this指向當前的DOM對象，並以參數形式傳入其對應的數據和在選擇集中的序號。

註冊多個監聽函數

若是在同一個DOM對象上已經註冊有type類型的監聽函數，那麼再次調用on() 進行註冊將移除以前註冊的監聽函數。若是須要對一種事件註冊多個監聽函數，能夠在 事件類型名稱後增長一個可選的命名空間，好比："click.foo"、"click.bar"。

d3.event：DOM事件對象

你可能已經注意到，d3的事件監聽函數在觸發時，傳入的參數中沒有DOM事件對象。 這樣設計的出發點是讓監聽函數能夠和其餘訪問器函數同樣，可以得到DOM對象對應 的數據和序號。

可是，在不少應用場景下，咱們仍是須要DOM事件對象，好比：

• 當鼠標點擊時，咱們須要它的xy座標，或者判斷用戶點擊的是左鍵仍是右鍵；
• 或者，當用戶敲擊鍵盤時，咱們須要
• 或者，咱們須要調用DOM事件對象的preventDefault()來禁止瀏覽器對某個事件的默認行爲；
• 或者，咱們須要調用stopPropagation()來阻止事件的冒泡行爲......

d3使用一個全局變量來提供DOM事件對象：d3.event。

d3.event僅在監聽函數中有效。每當事件觸發時，d3就將DOM事件對象賦給d3.event， 並在監聽器處理完以後將其清理。

d3.event就是你熟悉的Event對象，因此，隨便用。

d3.mouse：得到鼠標事件位置

儘管可使用DOM事件對象的pageX和pageY得到鼠標位置，d3提供了更好用的方法：

1. d3.mouse(container)

參數container表示一個HTML元素，d3.mouse()將返回鼠標位置相對於 這個容器元素的x、y座標。

這意味着對同一個鼠標事件，咱們只要傳入不一樣的容器元素，就能夠得到鼠標位置 不一樣的相對位置！

解脫了不少使人煩躁的計算過程，對吧？

參考資料：http://***/course/54fd40cfe564e50d50dcf284/