イベント リスナーが関数をすぐにトリガーするのはなぜですか?

イベント リスナー: プロンプトなしの関数呼び出しの謎

イベント リスナーを使用する場合、不可解な動作に遭遇することがあります。外部関数参照を使用してイベント リスナーを追加すると、要素をクリックしなくても、関数をすぐに呼び出すことができます。これはイライラさせられ、予期しない動作につながる可能性があります。

次の HTML スニペットを考えてみましょう:

<span>

クリック イベントを追加するには、addEventListener メソッドを使用します:

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

このコードは期待どおりに機能し、「最初のリンク」がクリックされたときにアラートをトリガーします。ただし、外部関数を 2 番目の引数として使用する場合:

function message_me(m_text) {
    alert(m_text)
}

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

message_me 関数がすぐに呼び出され、「2 番目のリンク」がクリックされる前でも警告メッセージが表示されます。

Toこの問題を解決するには、addEventListener の 2 番目のパラメーターが関数参照を期待していることを理解する必要があります。問題のあるコードでは、関数が直接呼び出され、その結果が addEventListener に渡されます。代わりに、匿名関数を 2 番目の引数として使用するか、関数を返すように外部関数を変更する必要があります。

たとえば、addEventListener:

function message_me(m_text) {
    alert(m_text)
} 

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

匿名関数内に関数参照を提供することで、「2 番目のリンク」がクリックされたときにのみ message_me 関数が呼び出されるようにします。

以上がイベント リスナーが関数をすぐにトリガーするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。