ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript `addEventListener` がクリック時ではなくページ読み込み時に起動するのはなぜですか?

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

DDD
DDDオリジナル
2024-10-30 02:57:28763ブラウズ

Why is my JavaScript `addEventListener` firing on page load instead of on click?

ページ読み込み時に 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。