41

だから私たちはページを持っています：

<span id='container'>
    <a href='#' id='first'>First Link</a>
    <a href='#' id='second'>Second Link</a>
</span>

そして、いくつかのクリックイベントを追加したい:

first.addEventListener('click', function(){alert('sup!');})

魔法のように動作します！ただし、2 番目の引数を外部関数にすると、次のようになります。

function message_me(m_text){
    alert(m_text)
}

second.addEventListener('click', message_me('shazam'))

すぐに関数を呼び出します。どうすればこれを止めることができますか? とても迷惑！

これがライブデモです: http://jsfiddle.net/ey7pB/1/

4

4 に答える 4

39

イアンの答えを引用：

2 番目のパラメーターは関数参照を想定しているため、それを提供する必要があります。問題のあるコードでは、すぐに関数を呼び出してその結果を渡します(これはundefined、関数がすべてを実行し、alert何も返さないためです)。関数を匿名関数で呼び出すか (最初の例のように)、関数を変更して関数を返します。

function message_me(m_text){
    alert(m_text)
} 

second.addEventListener('click', 
    function() {
        message_me('shazam');
    }
);

これが更新されたfiddleです。

于 2013-04-30T23:14:08.140 に答える
26

2 番目のパラメーターは関数参照を想定しているため、それを提供する必要があります。問題のあるコードでは、すぐに関数を呼び出してその結果を渡します(これはundefined、関数がすべてを実行し、alert何も返さないためです)。匿名関数で関数を呼び出すか (最初の例のように)、関数を変更して関数を返します。

あなたはこれを行うことができます：

function message_me(m_text){
    alert(m_text);
}

second.addEventListener('click', function () {
    message_me('shazam')
});

またはこれ：

function message_me(m_text){
    return function () {
        alert(m_text);
    };
}

second.addEventListener('click', message_me('shazam'));

デモ: http://jsfiddle.net/tcCvw/

于 2013-04-30T23:26:45.323 に答える
18

または .bind を使用できます

function message_me(m_text){
    alert(m_text);
}

second.addEventListener('click', message_me.bind(this, 'shazam'));

「閉鎖」に関するMDNドキュメントを確認してください

于 2016-06-19T18:42:39.770 に答える