将参数添加到指定函数处理程序

我需要保留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)); 
};

来源

2017-10-11 dman

到底是什么问题？有额外的形式参数不会伤害任何东西。 – Pointy

'e'越来越受到破坏，并且显示了url而不是实际的事件对象。 – dman

所以，首先你的代码中没有命名函数，第一行是将一个匿名函数的调用分配给你的'checkZipValidHandler'变量。其次，当你的函数没有返回任何东西时，你为什么将函数调用追加到变量中？ –

第一件事。

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

来源

2017-10-11 15:42:50 EugenAz

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

来源

2017-10-11 15:34:57 guest271314

另外，请注意'.bind（）'将返回一个新函数，并且*这是为了稍后能够移除事件侦听器而需要维护的引用的函数。 – Pointy

优秀！从未想过将实际的'zipInput'作为绑定的第一个参数传递。谢谢！ – dman

对于学习....为什么有必要在const checkZipValidHandler = function（origin，e）{}'中反转arg命令'origin，e'？ – dman

将参数添加到指定函数处理程序

回答

相关问题