如何让JavaScript函数动态切换内部引用的函数？

我现在有一个resolutionChange函数，原本在pixel.addEventListener("mouseover", classic);这行绑定了classic函数作为鼠标悬停事件处理逻辑。为了适配三个不同按钮，我之前复制了三次这个函数，只修改了绑定的事件处理函数，这种写法太冗余了。

我尝试给resolutionChange添加func参数来传入不同的处理函数，但没法实现我想要的调用方式。这个函数原本会在页面加载和滑块点击时触发，现在我把它放到buttonchange对象里，创建了三个仅事件绑定函数不同的方法来对应按钮调用，希望能找到更优雅的优化方案。

问题代码 #

原重复实现的函数 #

function resolutionChange(e) {
  const otherbuttons = document.querySelectorAll("button");
  otherbuttons.forEach((button) => {
    button.classList.remove("buttonclicked");
  });

  const button = document.querySelector("#classic");
  button.classList.add("buttonclicked");

  let pixel = document.querySelectorAll(".pixel");
  pixel.forEach((pixel) => {
    pixel.remove();
  });

  let slider = document.querySelector(`#slider`);
  let res = slider.value;

  for (let i = 0; i < res * res; i++) {
    let pixel = document.createElement("div");
    pixel.classList.add("pixel");
    pixel.setAttribute(
      "style",
      `width: ${512 / res}px; height: ${512 / res}px;`
    );
    pixel.addEventListener("mouseover", classic);
    mainholder.appendChild(pixel);
  }
}

尝试优化后的函数 #

function resolutionChange(func) {
  const otherbuttons = document.querySelectorAll("button");
  otherbuttons.forEach((button) => {
    button.classList.remove("buttonclicked");
  });

  const button = document.querySelector("#classic");
  button.classList.add("buttonclicked");

  let pixel = document.querySelectorAll(".pixel");
  pixel.forEach((pixel) => {
    pixel.remove();
  });

  let slider = document.querySelector(`#slider`);
  let res = slider.value;

  for (let i = 0; i < res * res; i++) {
    let pixel = document.createElement("div");
    pixel.classList.add("pixel");
    pixel.setAttribute(
      "style",
      `width: ${512 / res}px; height: ${512 / res}px;`
    );
    pixel.addEventListener("mouseover", func);
    mainholder.appendChild(pixel);
  }
}

期望的调用方式 #

let darkenbutton = document.querySelector("#darken");
darkenbutton.addEventListener("click", resolutionChange(darken));
let classicbutton = document.querySelector("#classic");
classicbutton.addEventListener("click", resolutionChange(classic));
let colorsbutton = document.querySelector("#colors");
colorsbutton.addEventListener("click", resolutionChange(colors));

解决方案 #

你的问题核心是直接调用resolutionChange(func)会立即执行函数，而不是把它作为事件回调传递，因为addEventListener需要接收一个函数引用，而不是函数执行的结果。另外优化后的函数里还有个问题：始终给#classic按钮加激活类，这不符合不同按钮的需求。

修正后的优化方案 #

方式一：返回闭包函数，传入按钮标识和处理函数

让resolutionChange返回一个事件回调函数，同时接收按钮ID和处理函数参数，解决回调传递和按钮激活类的问题：

function resolutionChange(buttonId, func) {
  // 返回一个事件处理函数，供addEventListener使用
  return function(e) {
    // 移除所有按钮的激活类
    const otherbuttons = document.querySelectorAll("button");
    otherbuttons.forEach((button) => {
      button.classList.remove("buttonclicked");
    });

    // 给目标按钮添加激活类
    const button = document.querySelector(`#${buttonId}`);
    button.classList.add("buttonclicked");

    // 移除现有像素块
    let pixels = document.querySelectorAll(".pixel");
    pixels.forEach((pixel) => {
      pixel.remove();
    });

    // 获取滑块分辨率
    let slider = document.querySelector(`#slider`);
    let res = slider.value;

    // 创建新像素块并绑定对应处理函数
    for (let i = 0; i < res * res; i++) {
      let pixel = document.createElement("div");
      pixel.classList.add("pixel");
      // 用style属性直接赋值，避免覆盖其他内联样式
      pixel.style.width = `${512 / res}px`;
      pixel.style.height = `${512 / res}px`;
      pixel.addEventListener("mouseover", func);
      mainholder.appendChild(pixel);
    }
  }
}

调用方式（符合你的期望逻辑）

// 给每个按钮绑定带参数的回调
let darkenbutton = document.querySelector("#darken");
darkenbutton.addEventListener("click", resolutionChange("darken", darken));

let classicbutton = document.querySelector("#classic");
classicbutton.addEventListener("click", resolutionChange("classic", classic));

let colorsbutton = document.querySelector("#colors");
colorsbutton.addEventListener("click", resolutionChange("colors", colors));

// 页面加载时触发默认的classic模式
window.addEventListener("load", resolutionChange("classic", classic));

方式二：通过事件对象获取当前按钮，减少参数传递

如果按钮ID和处理函数命名有对应关系，可以直接通过事件对象获取点击的按钮，简化参数：

function resolutionChange(func) {
  return function(e) {
    // 获取当前点击的按钮
    const currentButton = e.target;
    // 移除所有按钮激活类
    document.querySelectorAll("button").forEach(btn => btn.classList.remove("buttonclicked"));
    // 给当前按钮加激活类
    currentButton.classList.add("buttonclicked");

    // 后续逻辑和上面一致
    let pixels = document.querySelectorAll(".pixel");
    pixels.forEach(pixel => pixel.remove());

    let slider = document.querySelector("#slider");
    let res = slider.value;

    for (let i = 0; i < res * res; i++) {
      let pixel = document.createElement("div");
      pixel.classList.add("pixel");
      pixel.style.width = `${512 / res}px`;
      pixel.style.height = `${512 / res}px`;
      pixel.addEventListener("mouseover", func);
      mainholder.appendChild(pixel);
    }
  }
}

调用方式

document.querySelector("#darken").addEventListener("click", resolutionChange(darken));
document.querySelector("#classic").addEventListener("click", resolutionChange(classic));
document.querySelector("#colors").addEventListener("click", resolutionChange(colors));

额外优化点 #

• 用pixel.style.width代替setAttribute("style", ...)，更直观且不会覆盖其他内联样式
• 变量名统一，比如把选择所有像素的变量改成pixels，避免和循环里的单个pixel变量混淆
• 滑块触发时，可以先获取当前激活的按钮，再调用对应的处理逻辑

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