將參數添加到指定函數處理程序

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

將參數添加到指定函數處理程序

回答

相關問題