- > for循環中的 - >事件偵聽器中的函數是否可以有參數？

Question

這是我的意思，我有一個函數可以設置各種LI的背景和背景位置來製作一個社交媒體精靈，現在我想給它添加一個懸停事件監聽器，當它懸停時將背景圖像從-29px它的原始位置。

所以要做到這一點，我使用了一個變量，它是在for循環的不同實例中聲明和設置的（在這種情況下，它的var「k」）k開始爲=，然後每次循環迭代它被添加到它-28 。

我希望for循環中的事件監聽器中的函數使用此變量來計算懸停的背景位置，當我添加參數時，它只是在for循環運行時自動調用自身（就像我做功能日誌東西）我能夠得到它從我以前的循環，但它沒有運行時，我需要它登錄var我。

在這裏我留下一個片段

function sprite() { 
 

 
    var c = document.getElementById("social").children; 
 
    var k = 0; 
 
    var cnc = ""; 
 
    for (i = 0; i < c.length; i++) { 
 
    c[i].style.backgroundImage = "url(../Imgs/social_icons.jpg)"; 
 
    cnc = String(k) + "px 0px"; 
 
    c[i].addEventListener("mouseenter", spriteHover); 
 
    k = k - 28; 
 
    c[i].style.backgroundPosition = cnc; 
 
    } 
 
} 
 

 
function spriteHover() { 
 
    var c = this.querySelector("li"); 
 
    var pnc = "0px -29px"; 
 
    c.style.backgroundPosition = pnc; 
 
} 
 
sprite(); 
 
alert("working"); 
 

 
/*this is how my function was originally (the way i want it to work but doesnt) notice line 32 
 
function sprite() { 
 

 
    var c = document.getElementById("social").children; 
 
    var k = 0; 
 
    var cnc = ""; 
 
    for (i = 0; i < c.length; i++) { 
 
     c[i].style.backgroundImage = "url(../Imgs/social_icons.jpg)"; 
 
     cnc = String(k) + "px 0px"; 
 
     c[i].addEventListener("mouseenter", spriteHover(k)); 
 
     k = k - 28; 
 
     c[i].style.backgroundPosition = cnc; 
 
    } 
 
} 
 

 
function spriteHover(k) { 
 
    var c = this.querySelector("li"); 
 
    var pnc = k +"px -29px"; 
 
c.style.backgroundPosition = pnc; 
 
} 
 
sprite(); 
 

 

 

 
*/

.smedia { 
 
    background-color: ; 
 
    height: 20px; 
 
    position: absolute; 
 
} 
 
.smedia > ul { 
 
    position: relative; 
 
    display: inline-block; 
 
    background-color: ; 
 
    left: 836px; 
 
    height: 28px; 
 
    margin-right: 8px; 
 
    margin-top: 8px; 
 
} 
 
.smedia > ul li { 
 
    background-color: black; 
 
    display: inline-block; 
 
    height: 28px; 
 
    width: 28px; 
 
} 
 
.smedia a { 
 
    display: inline-block; 
 
    color: black; 
 
    text-decoration: none; 
 
    height: 28px; 
 
    width: 28px; 
 
}

<nav class="smedia" id="smedia"> 
 
    <ul id="social"> 
 
    <li> 
 
     <a href="https://www.facebook.com/" class="fb" target="_blank"></a> 
 
    </li><!-- 
 

 
         --><li> 
 
     <a href="https://twitter.com/?lang=en" class="tt" target="_blank"></a> 
 
    </li><!-- 
 

 
         --><li> 
 
     <a href="https://www.youtube.com/" class="yt" target="_blank"></a> 
 
    </li><!-- 
 

 
    --><li> 
 
     <a href="https://www.instagram.com/?hl=en" class="ig" target="_blank"></a> 
 
    </li><!-- 
 

 
         --><li> 
 
     <a href="https://www.tumblr.com/" class="t" target="_blank"></a> 
 
    </li><!-- 
 

 
         --><li> 
 
     <a href="https://www.google.com/" class="gg" target="_blank"></a> 
 
    </li> 
 
    </ul> 
 
</nav>

，任何意見或修正將高興地歡迎。

Answer 1

簡單的回答是。您需要一個創建整個函數的函數，並返回該函數，而不是評估函數聲明並返回評估結果。

舉例來說。如果我行

c[i].addEventListener("mouseenter", spriteHover);

設置爲

c[i].addEventListener("mouseenter", spriteHover(c[i],k));

這看起來像它傳遞的參數在正確的，如果你試圖提醒在spriteHover函數的參數。但是它不起作用的原因是因爲不是將函數分配爲事件監聽器，而是分配了在for循環中調用時返回的spriteHover函數的結果（將函數名稱後面的括號實際上使javascript變爲調用這個函數）。

因此，爲了傳遞參數，但將整個函數返回給事件偵聽器語句，我們創建了另一個函數，該函數實際上將函數作爲整體返回給我們。例如

// Handler that will return a function to the addeventlistener 
    function createHoverHandler(param1, param2 ....) { 
    return function() { 
     spriteHover(param1, param2 ....); 
    } 
    } 

以下是使用您的代碼和創建者函數的示例。請注意，我已將mouseenter更改爲mouseover並在mouseout中添加以實現懸停效果，因此我們必須定義鼠標何時進入元素以及何時退出的情況。

示例代碼：http://codepen.io/Nasir_T/pen/rWJNKX

希望這有助於瞭解如何實現這一目標。