JS中把函數作為另一函數的參數傳遞方法（總結）

今天在給元素註冊事件的時候，使用addEventListener遇到了一個問題，這個好像之前也遇到過，覺得有必要總結一下，就是js函數作為參數引發的問題。首先看以下代碼，覺得下面代碼有問題嗎？是否能達到點擊id3對應的元素後，彈出id3呢？

例1

var obj3=document.getElementById("id3");
obj3.addEventListener("click",curClick("id1"),true);
function curClick(id){
alert(id);
}

答案是否定，不能達到我想要的效果，因為這行代碼在頁面載入完成時候，就會彈出id3。當我單擊id3對應的元素時候，頁面沒有任何反應。

於是我將代碼改為如下兩種情況：

例2

var obj3=document.getElementById("id3");

obj3.addEventListener("click",function(e){curClick("id3");stopPropagation(e)},true);

function curClick(id){

alert(id);

}

例3

var obj1=document.getElementById("id1");
obj1.addEventListener("click",curClick1,true);
function curClick1(){
alert("okey");
}

這次執行正常了，這是為什麼呢？

因為在JS世界裡curClick("id3")就是直接調用curClick("id3")，而非將其作為一個參數來傳遞，如果要將其作為一個參數來傳遞，如果不需要傳遞參數，直接傳遞函數名就可，如果需要傳遞參數，有兩種解決辦法

方法一：藉助匿名函數，將要傳遞的函數，放在匿名函數中，將匿名函數作為參數如例2

eg：將function(){myfunction(val1,val2,......);}作為參數傳遞。

第二：改寫需要傳遞函數

function curClick1(val){
<span stylex="white-space:pre"> </span>return function(){
alert(val);
};
}

作者：資源庫

原文：https://www.zyku.net/js/1447.html

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！