爲什麼在傳遞參數時你必須在addeventlistener中有一個匿名函數？

所以，如果你有一個帶有參數的命名函數並且調用該函數，那麼在使用addEventListener時它不能正常工作，但是如果你將它包裝在一個匿名函數中，那麼它工作，爲什麼？爲什麼在傳遞參數時你必須在addeventlistener中有一個匿名函數？

<input type="button" value="click me" id="subBtn" /> <br /> 
<div id="myDiv">default text</div>

這是我的JavaScript。

function myFunc(str){ 
    document.getElementById("myDiv").innerHTML = str; 
} 

//does not work. 
document.getElementById("subBtn").addEventListener("click", myFunc("hey there buddy"), false); 

//this works, but why? 
document.getElementById("subBtn").addEventListener("click", function(){ 
    myFunc("hey there buddy"); 
}, false);

現在，如果myFunc沒有使用任何參數，那麼這兩種方式都可以。

來源

2015-04-02 dragonore

第二個參數是對函數的引用，在第二個示例中是直接觸發函數。'addEventListener（「click」，myFunc，false）;'會工作，訣竅是通過它傳遞一個參數。 – 2015-04-02 22:53:45

要添加到上面的註釋中，您正在執行'myFunc（）'並將該函數的* result *（'undefined'）傳遞給'addEventListener'。 – 2015-04-02 23:01:42

的原因，這個工程：

function(){ 
    //code here 
    }

是一個函數聲明，這不在點擊事件發生之前會被解僱。這是相同的：

var foo = function(){ 
    //code here 
}; 

element.addEventListener('click', foo, false);

但是現在你有沒有一個參數，因爲當你真正開火的功能，他們只粘貼的問題。該行爲埋在addEventListener之內，無法直接訪問。

如此說來，有使用.bind一個簡單的解決方法：

element.addEventListener('click', myFunc.bind(null, 'Hey there buddy'), false);

什麼綁定不是創建具有一個綁定範圍（第一自變量，其可以是非常有用的）和參數（每自變量的函數之後）。

這有效地將綁定參數傳遞給您的命名函數，而不使用匿名包裝器。

來源

2015-04-02 23:07:41

你知道，如果我有參數，我只會用一個匿名函數將它關閉，我只是不知道爲什麼你必須這樣做，或者必須有另一個函數，當你理解爲什麼時，它總是很好，而不僅僅是這樣做，因爲你知道它的工作原理。感謝您的解釋。 – dragonore 2015-04-02 23:10:55

@dragonore我很高興我能夠增加清晰度！作爲一個方面說明：'.bind'是一個非常強大和有用的JavaScript部分，如果你不熟悉它，這是值得研究。 – 2015-04-02 23:13:22

您必須將一個函數作爲參數傳遞給addEventListener。

但是，它並沒有採用匿名：

element.addEventListener("click", function IAmNotAnonymous(){ 
    myFunc("hey there buddy"); 
});

你也可以使用函數調用，沒有一個函數表達式包裝。然而，在調用的返回值必須是一個函數：

function myFunc2(arg) { 
    return someFunction; // <-- This must be a function 
} 
element.addEventListener("click", myFunc2("hey there buddy"));

當您使用addEventListener("click", myFunc("hey there buddy"))，這是行不通的，因爲你的myFunc沒有返回的功能。相反，

要調用myFunc，而無需等待事件
你逝去的返回值（undefined）作爲參數傳遞給addEventListener

請注意，這個問題是不是由於有參數，這是由於調用該函數。使用addEventListener("click", myFunc())將是相同的。

而不是使用函數表達式包裝的，你可以在bind感興趣：

element.addEventListener("click", myFunc.bind(void 0, "hey there buddy"));

來源

2015-04-02 22:59:21 Oriol

爲什麼在傳遞參數時你必須在addeventlistener中有一個匿名函數？

回答

相關問題