Question

我需要保留checkZipValidHandler一个命名函数，以便稍后我可以删除事件监听器（不能使用匿名函数删除事件监听器）。

但我还需要传递一个名为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));
};

Answer 1

将origin作为第二个参数传递给.bind()

const checkZipValidHandler = function(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');

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

Answer 2

第一件事。

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

为命名函数处理程序

2 个答案: