d3.js:数据可视化利器之交互行为：响应DOM事件

on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数：

参数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的事件监听函数在触发时，传入的参数中没有DOM事件对象。这样设计的出发点是让监听函数可以和其他访问器函数一样，能够获得DOM对象对应的数据和序号。

但是，在很多应用场景下，我们还是需要DOM事件对象，比如：

d3使用一个全局变量来提供DOM事件对象：d3.event。

d3.event仅在监听函数中有效。每当事件触发时，d3就将DOM事件对象赋给d3.event，并在监听器处理完之后将其清理。

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

尽管可以使用DOM事件对象的pageX和pageY获得鼠标位置，d3提供了更好用的方法：

参数container表示一个HTML元素，d3.mouse()将返回鼠标位置相对于这个容器元素的x、y坐标。

这意味着对同一个鼠标事件，我们只要传入不同的容器元素，就可以获得鼠标位置不同的相对位置！

解脱了很多令人烦躁的计算过程，对吧？

参考资料：http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。