如何不添加onClick属性实现点击多个按钮执行不同函数？

有两种常用的实现方式，都不需要修改HTML添加onclick属性：

方案1：通过按钮文本映射处理函数（可读性最高，后续维护方便） #

利用按钮固定的文本内容和处理函数建立映射关系，不需要依赖按钮的排列顺序：

// 示例测试数据
const baseData = [1, 2, 3, 4, 5];

// 建立按钮文本和对应处理逻辑的映射
const btnHandlerMap = {
  'Log baseData': () => console.log(baseData),
  'Log baseData in reverse': () => console.log([...baseData].reverse()),
  'Log baseData without first item': () => console.log(baseData.slice(1)),
  'Log each baseData entry as a new log': () => baseData.forEach(item => console.log(item))
};

// 批量绑定事件
document.querySelectorAll('button').forEach(btn => {
  const handler = btnHandlerMap[btn.textContent.trim()];
  if (handler) btn.addEventListener('click', handler);
});

方案2：通过索引匹配处理函数（代码更简洁，适合固定顺序的场景） #

querySelectorAll返回的节点列表顺序和HTML中按钮的排列顺序完全一致，按顺序把处理函数放入数组后直接通过索引匹配即可：

// 示例测试数据
const baseData = [1, 2, 3, 4, 5];

// 按HTML中按钮从上到下的顺序排列处理函数
const handlerList = [
  () => console.log(baseData),
  () => console.log([...baseData].reverse()),
  () => console.log(baseData.slice(1)),
  () => baseData.forEach(item => console.log(item))
];

// 批量绑定事件
document.querySelectorAll('button').forEach((btn, index) => {
  btn.addEventListener('click', handlerList[index]);
});

两种方案都可以直接运行，点击对应按钮就会执行对应的打印逻辑。

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