d3.js:数据可视化利器之 交互行为：响应DOM事件
selection.on：事件监听操作符
on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数：
- 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提供了更好用的方法：
- d3.mouse(container)
参数container表示一个HTML元素，d3.mouse()将返回鼠标位置相对于 这个容器元素的x、y坐标。
这意味着对同一个鼠标事件，我们只要传入不同的容器元素，就可以获得鼠标位置 不同的相对位置！
解脱了很多令人烦躁的计算过程，对吧？
参考资料：http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
