クリック イベント リスナーが要素をクリックしたときではなく、ページの読み込み時に起動するのはなぜですか?

ページ読み込み時の addEventListener イベント トリガー

JavaScript では、addEventListener() メソッドは特定の要素のイベント リスナーを登録するように設計されています。ただし、動的に作成された要素にクリック リスナーをアタッチしようとすると、一部の開発者は、要素がクリックされたときではなく、ページの読み込み時にイベントが発生するという特殊な動作に遭遇する可能性があります。この問題を解明するために、コード スニペットとその実行を詳しく見てみましょう。

提供されたスクリプトでは、document.write() を使用して ID「myDiv」を持つ HTML div 要素が作成され、続いて要素が取得されます。 document.getElementById("myDiv") を使用します。次に、addEventListener() メソッドを使用して、「クリック」イベントのイベント リスナーを取得した要素にアタッチします。リスナーは、alert("clicktrack") として定義され、メッセージ "clicktrack" を含むアラートを表示しようとします。

問題の核心は、イベント ハンドラーが addEventListener() に渡される方法にあります。関数式を使用する場合は、戻り値の代わりに関数自体が渡されるように、関数を括弧内にカプセル化することが不可欠です。コード スニペットの正しい構文は次のとおりです。

el.addEventListener("click", function() { alert("clicktrack"); }, false);

この変更により、アラート呼び出しが関数内にカプセル化され、関数が関数の戻り値ではなくイベント ハンドラーとして登録されるようになります。未定義。その結果、イベントは、ページの読み込み時ではなく、意図したとおり、「myDiv」要素がクリックされたときにのみトリガーされます。

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