问使用javascript，如何让我的函数在其中使用不同的引用函数？
EN

Stack Overflow用户

提问于 2022-08-05 09:04:27

回答 1查看 28关注 0票数 0

对于如下函数，在pixel.addEventListener行(“mouseover”，经典)；我希望能够将经典函数引用与其他函数引用交换，因为我有使用相同函数的按钮，但只交换了该行中的函数引用。现在，我已经复制和粘贴了整个函数的3个不同的时间，在这一行中有不同的引用函数，但我知道一定有一个更优雅的解决方案。我尝试为这个函数创建一个论点，但它似乎不起作用。

resolutionChange函数的调用如下：

window.onload = resolutionChange;
...
slider.addEventListener("click", resolutionChange);

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);
  }
}

我似乎无法找到能够使用resolutionChange函数块代码的解决方案，因此我可以这样使用它，例如

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));

而不是像这样

let darkenbutton = document.querySelector("#darken");
darkenbutton.addEventListener("click", buttonchange.darkenmethod);
let classicbutton = document.querySelector("#classic");
classicbutton.addEventListener("click", buttonchange.classicmethod);
let colorsbutton = document.querySelector("#colors");
colorsbutton.addEventListener("click", buttonchange.colorsmethod);

其中按钮更改对象保存了3次重复的resolutionChange函数，只更改了前面提到的3种不同函数的行

function

reference

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-05 15:16:56

您可以这样做，只需要以不同的方式调用该函数：

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

  const button = e.target;
  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);
  }
}
const darkenbutton = document.querySelector("#darken");
darkenbutton.addEventListener("click", e => resolutionChange(e, darken));
const classicbutton = document.querySelector("#classic");
classicbutton.addEventListener("click", e => resolutionChange(e, classic));
const colorsbutton = document.querySelector("#colors");
colorsbutton.addEventListener("click", e => resolutionChange(e, colors));

或者，您可以使函数返回一个事件处理程序闭包：

function makeResolutionChanger(func) {
  return function clickHandler(e) {
    const otherbuttons = document.querySelectorAll("button");
    otherbuttons.forEach((button) => {
      button.classList.remove("buttonclicked");
    });
  
    const button = e.target;
    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);
    }
  }
}
const darkenbutton = document.querySelector("#darken");
darkenbutton.addEventListener("click", makeResolutionChanger(darken));
const classicbutton = document.querySelector("#classic");
classicbutton.addEventListener("click", makeResolutionChanger(classic));
const colorsbutton = document.querySelector("#colors");
colorsbutton.addEventListener("click", makeResolutionChanger(colors));