d3事件(三):事件的捕获与冒泡

最新推荐文章于 2021-10-24 08:37:57 发布

原创

最新推荐文章于 2021-10-24 08:37:57 发布 · 6.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#d3 #d3js #d3应用专题

本文探讨了D3.js中事件的捕获与冒泡机制。当用户触发事件后，事件首先从根节点捕获，直至事件源，然后从事件源开始冒泡向上。在D3的on方法中，通过第三个参数控制监听阶段。通过stopPropagation方法可以阻止事件的进一步传播。示例展示了如何使用父节点捕获事件，以简化业务逻辑和提高代码性能。

依赖于DOM节点的父子关系，事件的捕获与冒泡都是在父子节点之间传递，用户触发事件后，首先进入捕获阶段，从最顶层的根节点(也就是window)开始依次详细传递，直到查找到事件发生源为止，然后进入事件冒泡阶段，从事件发生源开始依次向上传播事件，流程图如下图所示。
事件传播过程

注册事件时，DOM元素监听事件的捕获阶段还是冒泡阶段，只能选择其一，在d3的事件注册中，由on方法的第三个参数(类型为boolean)决定。

另外，需要补充的是，在事件传播的过程中，如果事件传播被手动终止(利用事件的stopPropagation方法)，则后续所有的事件传播过程都不会发生，示例代码如下。

//  假定页面中存在一个id为container的div元素
var datas = [{name : 'yiifaa'}, {name : 'yiifee'}];
d3.select('#container')
  .selectAll('button')
　.data(datas)
　.enter()
　//  
　.appe

最低0.47元/天解锁文章