- > forループ内の - >イベントリスナーの関数は、パラメータを持つことができますか？

Question

ここで私は、さまざまなLIの背景と背景位置を設定してソーシャルメディアのスプライトを作成する機能を持っています。これで、ホバーイベントリスナーを広告に表示し、背景画像を-29pxからその元の位置。

これを行うには、forループの異なるインスタンス（この場合はvar "k"）で宣言され、設定された変数を使用します。kは=で始まり、各ループ反復に-28が追加されます。

forループのイベントリスナーの関数で、この変数を使用してホバーの背景位置を計算したい場合、パラメータを追加すると、forループが実行されたときに終了します（関数ログ何か）私は前のループからvar iをログに記録することができましたが、それが必要なときには実行されませんでした。

ここで私はスニペット

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],k));

へ

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

を設定する場合、これはあなたがspriteHover機能でパラメータを警告しようとした場合、そのが正しくで引数を渡すように見えます。しかし、それが機能しない理由は、イベントリスナーとして関数を代入するのではなく、forループで呼び出されたときに返されるspriteHover関数の結果を代入するためです。（関数名の後ろに角かっこを置くと、この関数を呼び出す）。

したがって、パラメータを渡してもイベントリスナ文に関数全体を返すためには、実際に関数全体を返す別の関数を作成します。例えば

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

ここにコードと作成者機能を使用したサンプルがあります。私はmouseoverをmouseoverに変更しました。またマウスオーバーで追加すると、マウスが要素に入るときと終了するときの両方の状況を定義する必要があるホバー効果が得られます。

サンプルコード：http://codepen.io/Nasir_T/pen/rWJNKX

が、これはこれを達成する方法を理解するのに役立ちます願っています。