如何在D3.js的.on()方法中指定多种事件类型？问题求助

嘿，我之前也踩过这个坑！一开始和你一样，以为D3的.on()方法支持用空格分隔多个事件类型，让同一个回调处理，但实际测试后发现完全没效果，后来仔细翻了D3的事件处理文档才搞清楚原因。

问题根源 #

D3.js的.on()方法并不支持用空格分隔多个事件类型！你写的"click keypress"会被D3识别成一个名为"click keypress"的自定义事件，而不是同时绑定原生的click和keypress事件，所以自然不会触发预期的回调。

正确的实现方式 #

有两种简单的方法可以实现“多个事件共用同一个回调”的需求：

1. 多次调用.on()分别绑定事件

把每个事件单独绑定到同一个回调函数上，代码更直观：

// 先定义共用的回调函数
function handleInputEvent() {
  console.log("fired " + d3.event.type);
}

// 分别绑定click和keypress事件
d3.select("body")
  .append("input")
  .attr("type", "text")
  .on("click", handleInputEvent)
  .on("keypress", handleInputEvent);

2. 用循环批量绑定事件

如果需要绑定的事件类型比较多，用循环会更简洁：

const inputElement = d3.select("body")
  .append("input")
  .attr("type", "text");

// 定义需要绑定的事件列表
const eventTypes = ["click", "keypress"];

// 循环绑定每个事件到同一个回调
eventTypes.forEach(type => {
  inputElement.on(type, () => {
    console.log("fired " + d3.event.type);
  });
});

这样修改之后，click和keypress事件就都能正常触发控制台打印啦，而且通过d3.event.type还能明确看到是哪个事件触发的回调，比直接打印整个event对象更清晰~

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