JavaScript `addEventListener` がクリック時ではなくページ読み込み時に起動するのはなぜですか?

ページ読み込み時に JavaScript "addEventListener" イベントが発生する

この問題は、特に提供されたコード スニペットでイベント リスナーが不適切にアタッチされている場合に発生します。 。説明と解決策は次のとおりです。

提供されたコードでは、「click」イベントのイベント リスナーは、ID「myDiv」を持つ新しく作成された div 要素にアタッチされます。

<code class="javascript">el = document.getElementById("myDiv");
el.addEventListener("click", alert("clicktrack"), false);</code>

ただし、問題はイベント リスナーのコールバック関数内にあります。この関数は、文字列でラップされたアラート ステートメントです。

<code class="javascript">alert("clicktrack")</code>

このコードは、イベント リスナーがアタッチされるとすぐにアラート ステートメントを実行しようとします。イベント リスナーは DOM の解析および実行中に登録されるため、要素がクリックされたときではなく、ページが読み込まれるときにアラートが呼び出されます。

これを解決するには、コードでアラート ステートメントを匿名関数でラップする必要があります。

<code class="javascript">el.addEventListener("click", function() { alert("clicktrack"); }, false);</code>

この変更により、意図したとおり、「myDiv」要素が「click」イベントを受信した場合にのみアラートが実行されます。

以上がJavaScript `addEventListener` がクリック時ではなくページ読み込み時に起動するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。