web-dev-qa-db-ja.com

addEventListenerは私にそれを要求することなく関数を呼び出します

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

<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/

javascriptaddeventlistener
17
LittleBobbyTables

Ianの引用 answer ：

2番目のパラメーターは関数referenceを想定しているため、1つ指定する必要があります。問題のあるコードでは、すぐに関数を呼び出し、そのresultを渡します（これはundefined...なので、すべての関数はalertおよび何も返しません）。 （最初の例のように）匿名関数で関数を呼び出すか、関数を変更して関数を返します。

function message_me(m_text){
    alert(m_text)
} 

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

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

22
clav

2番目のパラメーターは関数referenceを想定しているため、関数を指定する必要があります。問題のあるコードでは、すぐに関数を呼び出し、そのresultを渡します（これは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/

17
Ian

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

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

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

check MDN Documentation 「クロージャ」について

10
Sehyun Kim

矢印関数を使用した最新のES6ソリューション

second.addEventListener('click', () => message_me('shazam'))
3
Jesse Reza Khorasanee