如何获取d3.js中的事件函数并添加新事件不覆盖原有逻辑？

嘿，这个场景我太熟悉了！D3里直接用.on()给同一个事件绑定新函数确实会覆盖掉原来的，但其实有两种靠谱的办法能解决你的问题——要么先把已绑定的原有事件函数取出来，和你的新函数组合执行；要么利用D3的命名空间特性直接叠加多个处理函数。

D3的.on()方法有个实用小技巧：当你只传事件名称（比如"mouseup"）而不传第二个函数参数时，它会返回当前绑定在这个事件上的处理函数。利用这一点，你可以先拿到原来的handleRelease，然后在新函数里先调用它，再执行你的自定义逻辑：

// 第一步：获取已绑定的mouseup事件处理函数
var originalHandler = foo.on("mouseup");

// 第二步：定义新函数，先执行原有逻辑，再跑你的自定义代码
var myFunction = function() {
  // 确保原有函数的上下文（this指向当前DOM元素）和参数都正确传递
  originalHandler.apply(this, arguments);
  // 执行你的自定义逻辑
  console.log("bye, bye");
};

// 第三步：重新绑定组合后的函数
foo.on("mouseup", myFunction);

这里用apply(this, arguments)是关键——它能保证原有函数的执行上下文和D3默认的一致，同时把事件对象等参数也传递过去，避免原有逻辑出错。

从D3 v4版本开始，.on()支持给同一个事件绑定多个处理函数，核心是给事件名称加上命名空间（用点号分隔）。比如你可以先给原来的绑定加个命名空间：

// 给原有mouseup事件绑定加上命名空间".original"
var foo = d3.select("#foo").on("mouseup.original", handleRelease);

之后绑定你的自定义函数时，用另一个命名空间（或者直接绑定，但加命名空间方便后续单独移除）：

// 绑定新的mouseup事件，用命名空间".custom"
foo.on("mouseup.custom", function() {
  console.log("bye, bye");
});

这样当mouseup触发时，两个函数会按照绑定的先后顺序依次执行。如果之后你想单独移除某一个处理函数，也可以通过命名空间精准操作：

// 只移除自定义的处理函数
foo.on("mouseup.custom", null);
// 只移除原来的处理函数
foo.on("mouseup.original", null);

注意：如果你的D3版本是v3或更早，这个方法不适用，只能用方法1。

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