selection.on：事件監(jiān)聽操作符

on()操作符可以添加或移除選擇集中每個 DOM元素的事件監(jiān)聽函數(shù)：

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

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

參數(shù)capture是可選的，對應于W3C的useCapture標志。

獲取/移除當前監(jiān)聽函數(shù)

參數(shù)listener是可選的，如果未指定該參數(shù)，則on()調(diào)用返回 type類型的當前監(jiān)聽函數(shù)。

要移除一個事件監(jiān)聽，將listener參數(shù)置為null即可。

為事件注冊監(jiān)聽函數(shù)

參數(shù)listener是一個監(jiān)聽函數(shù)，當d3捕捉到DOM事件后，將調(diào)用該監(jiān)聽函數(shù)， 并忽略該函數(shù)的返回值。監(jiān)聽函數(shù)也是一個訪問器，d3觸發(fā)監(jiān)聽函數(shù)時， 將this指向當前的DOM對象，并以參數(shù)形式傳入其對應的數(shù)據(jù)和在選擇集中的序號。

注冊多個監(jiān)聽函數(shù)

如果在同一個DOM對象上已經(jīng)注冊有type類型的監(jiān)聽函數(shù)，那么再次調(diào)用on() 進行注冊將移除之前注冊的監(jiān)聽函數(shù)。如果需要對一種事件注冊多個監(jiān)聽函數(shù)，可以在 事件類型名稱后增加一個可選的命名空間，比如："click.foo"、"click.bar"。

d3.event：DOM事件對象

你可能已經(jīng)注意到，d3的事件監(jiān)聽函數(shù)在觸發(fā)時，傳入的參數(shù)中沒有DOM事件對象。 這樣設計的出發(fā)點是讓監(jiān)聽函數(shù)可以和其他訪問器函數(shù)一樣，能夠獲得DOM對象對應 的數(shù)據(jù)和序號。

但是，在很多應用場景下，我們還是需要DOM事件對象，比如：

• 當鼠標點擊時，我們需要它的xy坐標，或者判斷用戶點擊的是左鍵還是右鍵；
• 或者，當用戶敲擊鍵盤時，我們需要
• 或者，我們需要調(diào)用DOM事件對象的preventDefault()來禁止瀏覽器對某個事件的默認行為；
• 或者，我們需要調(diào)用stopPropagation()來阻止事件的冒泡行為......

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

d3.event僅在監(jiān)聽函數(shù)中有效。每當事件觸發(fā)時，d3就將DOM事件對象賦給d3.event， 并在監(jiān)聽器處理完之后將其清理。

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

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

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

1. d3.mouse(container)

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

這意味著對同一個鼠標事件，我們只要傳入不同的容器元素，就可以獲得鼠標位置 不同的相對位置！

解脫了很多令人煩躁的計算過程，對吧？

參考資料：http://www./course/54fd40cfe564e50d50dcf284/