Javascript 将参数添加到命名函数处理程序

我需要保留

checkZipValidHandler

一个命名函数，以便以后可以删除事件侦听器（无法使用anon函数删除事件侦听器）

但是我还需要传入一个名为

origin

的参数以及事件对象。我不想对HTML应用任何属性以附加到事件对象

我怎样才能做到这一点，并且仍然保持它是一个命名函数

const checkZipValidHandler = function(e, origin) {
    console.log(origin);
    const zipInput = document.querySelector('.f-zipcode-no-inventory');
    const chooseBtn = document.querySelector('.f-search-button-no-inventory');

    checkZipValid(e, zipInput.value, chooseBtn, origin);
}(origin);

const addEventListeners = (origin) => {
    const zipInput = document.querySelector('.f-zipcode-no-inventory');
    const chooseBtn = document.querySelector('.f-search-button-no-inventory');

    chooseBtn.addEventListener('click', validateRetryHandler);
    zipInput.addEventListener('keyup', checkZipValidHandler.bind(origin));
};

---

将

origin

作为第二个参数传递给

.bind（）

---

将

origin

作为第二个参数传递给

.bind（）

---

第一件事。

checkZipValidHandler.bind（origin）

创建一个新函数。因此，这样（

zipInput.addEventListener（'keyup'，checkZipValidHandler.bind（origin））；

）以后您将无法删除事件侦听器

第二件事。

bind

将上下文作为第一个参数，要绑定的参数作为以下参数

第三件事。

当您将一个参数绑定到函数时，您应该期望它是调用绑定函数后捕获的第一个参数

现在我们开始：

const checkZipValidHandler = (origin, e) => {
  console.log(origin)
  const zipInput = document.querySelector('.f-zipcode-no-inventory');
  const chooseBtn = document.querySelector('.f-search-button-no-inventory');

  checkZipValid(e, zipInput.value, chooseBtn, origin);
};

const addEventListeners = (origin) => {
  const zipInput = document.querySelector('.f-zipcode-no-inventory');
  const chooseBtn = document.querySelector('.f-search-button-no-inventory');

  const checkZipValidHandlerBound = checkZipValidHandler.bind(null, origin);

  zipInput.addEventListener('keyup', checkZipValidHandlerBound);
};

---

第一件事。

checkZipValidHandler.bind（origin）

创建一个新函数。因此，这样（

zipInput.addEventListener（'keyup'，checkZipValidHandler.bind（origin））；

）以后您将无法删除事件侦听器

第二件事。

bind

将上下文作为第一个参数，要绑定的参数作为以下参数

第三件事。

当您将一个参数绑定到函数时，您应该期望它是调用绑定函数后捕获的第一个参数

现在我们开始：

const checkZipValidHandler = (origin, e) => {
  console.log(origin)
  const zipInput = document.querySelector('.f-zipcode-no-inventory');
  const chooseBtn = document.querySelector('.f-search-button-no-inventory');

  checkZipValid(e, zipInput.value, chooseBtn, origin);
};

const addEventListeners = (origin) => {
  const zipInput = document.querySelector('.f-zipcode-no-inventory');
  const chooseBtn = document.querySelector('.f-search-button-no-inventory');

  const checkZipValidHandlerBound = checkZipValidHandler.bind(null, origin);

  zipInput.addEventListener('keyup', checkZipValidHandlerBound);
};

---

到底是什么问题？拥有额外的形式参数不会有任何影响。

e

正在变得混乱，并显示url而不是实际的事件对象。因此，首先，代码中没有命名函数，第一行是将匿名函数的调用分配给

checkZipValidHandler

变量。其次，当函数没有返回任何内容时，为什么要将函数调用附加到变量中？此外，您的声明调用函数；这是你的代码无法工作的一个重要原因。到底是什么问题？拥有额外的形式参数不会有任何影响。

e

正在变得混乱，并显示url而不是实际的事件对象。因此，首先，代码中没有命名函数，第一行是将匿名函数的调用分配给

checkZipValidHandler

变量。其次，当函数没有返回任何内容时，为什么要将函数调用附加到变量中？此外，您的声明调用函数；这是代码无法工作的一个重要原因。另外，请注意，

.bind（）

将返回一个新函数，这就是需要维护引用的函数，以便以后能够删除事件侦听器。非常好！从未想过将实际的

zipInput

作为第一个绑定的参数传递。谢谢为了学习…为什么必须在

const checkZipValidHandler=function（origin，e）{}

？@dman中反转参数顺序

origin，e

，因为浏览器将向函数传递事件引用，而不管它是如何声明的。使用

.bind（）

预绑定参数时，这些参数将作为实际参数显示在浏览器传入的任何参数之前（在事件引用之前）。@Pointy需要重新编写代码以定义绑定的函数和标识符，该函数和标识符不存在于附加事件的函数范围之外，请注意，

.bind（）

将返回一个新函数，该函数需要维护引用，以便以后能够删除事件侦听器。非常好！从未想过将实际的

zipInput

作为第一个绑定的参数传递。谢谢为了学习…为什么必须在

const checkZipValidHandler=function（origin，e）{}

？@dman中反转参数顺序

origin，e

，因为浏览器将向函数传递事件引用，而不管它是如何声明的。使用

.bind（）

预绑定参数时，这些参数将作为实际参数显示在浏览器传入的任何参数之前（在事件引用之前）。@Pointy需要重新编写代码以定义绑定的函数和标识符，该函数和标识符不存在于附加事件的函数范围之外