中文字幕丰满人孑伦_ d3.js:數據可視化利器之交互行為：響應DOM事件

selection.on：事件監聽(tīng)操作符

on()操作符可以添加或移除選擇集中每個(gè) DOM元素的事件監聽(tīng)函數：

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

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

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

獲取/移除當前監聽(tīng)函數

參數listener是可選的，如果未指定該參數，則on()調用返回 type類(lèi)型的當前監聽(tīng)函數。

要移除一個(gè)事件監聽(tīng)，將listener參數置為null即可。

為事件注冊監聽(tīng)函數

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

注冊多個(gè)監聽(tīng)函數

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

d3.event：DOM事件對象

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

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

當鼠標點(diǎn)擊時(shí)，我們需要它的xy坐標，或者判斷用戶(hù)點(diǎn)擊的是左鍵還是右鍵；
或者，當用戶(hù)敲擊鍵盤(pán)時(shí)，我們需要
或者，我們需要調用DOM事件對象的preventDefault()來(lái)禁止瀏覽器對某個(gè)事件的默認行為；
或者，我們需要調用stopPropagation()來(lái)阻止事件的冒泡行為......

d3使用一個(gè)全局變量來(lái)提供DOM事件對象：d3.event。

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

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

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

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

d3.mouse(container)

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

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

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

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