如何在d3中实现类似jQuery on的事件委托，绑定未创建DOM的事件？

D3 从 v6 版本开始已经原生支持和 jQuery 逻辑完全一致的事件委托，不需要每次新增动态元素时手动绑定事件。

你提到的 jQuery 写法对应的 D3 等效实现如下：

d3.select('body').on('click', 'div.hint', myEventFunction);

该写法和你熟悉的 jQuery 委托逻辑完全相同：事件实际绑定在父元素body上，触发时会自动校验事件源是否匹配div.hint选择器，匹配就会执行回调，无论目标元素是绑定事件时就已存在，还是后续动态生成插入页面的。

如果你使用的是 v5 及更早版本的 D3，没有原生的事件委托支持，可以手动实现匹配逻辑，写法参考如下：

d3.select('body').on('click', function(event) {
  if (event.target.matches('div.hint')) {
    // 手动调整this指向到触发事件的目标元素，和原生绑定行为保持一致
    myEventFunction.call(event.target, event);
  }
});

如果需要兼容不支持Element.matches的老旧浏览器，也可以替换为 D3 提供的匹配方法：d3.select(event.target).matches('div.hint')。

内容的提问来源于stack exchange，提问作者Nikki Locke