「addEventListener」がイベント トリガーではなくすぐに関数を呼び出すのはなぜですか?

「addEventListener はプロンプトなしで関数を呼び出す」の説明

イベント リスナーを要素にアタッチするとき、次の場合にのみ関数を実行する必要があります。イベントが発生します。ただし、場合によっては、関数が途中で呼び出されないようにするのが難しい場合があります。

次の HTML コードを考えてみましょう。

<span></span>

クリック イベントを2 番目のリンク:

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

ここで、「message_me」はメッセージを表示する外部関数です。驚くべきことに、このコードは、2 番目のリンクをクリックする前であっても、すぐに「message_me」関数をトリガーします。

問題

問題は、JavaScript が関数参照を処理する方法にあります。 「addEventListener」の 2 番目の引数として。 JavaScript は関数への参照を想定していますが、問題のあるコードでは、関数 'message_me('shazam')' がすぐに呼び出され、代わりにその結果が渡されます。

解決策

これを解決するには 2 つの方法があります問題:

• 匿名関数の作成: 関数参照を返すために 'message_me' を匿名関数でラップします:

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

この解決策2 番目のリンクが存在する場合にのみ「message_me」が呼び出されるようにします。

• 「message_me」から関数を返す: 関数参照を返すように「message_me」を変更します:

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

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

この場合, 「addEventListener」は、クリック イベントの発生時に実行される関数への参照を受け取ります。

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