提供されたコンテンツに基づいて、質問形式で考えられる記事タイトルをいくつか示します。 * **動的要素に追加すると、ページの読み込み時に JavaScript `addEventListener` が起動するのはなぜですか?** * **H

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

動的に作成された要素にイベント リスナーをアタッチする場合、リスナーが

提供されたスクリプトでは、要素が作成されて DOM に挿入される前にイベント リスナーが追加されるため、提供されたスクリプトでは、ページの読み込み時にイベントがトリガーされます。この問題を修正するには、次の点を考慮する必要があります:

• 最初に要素を作成します: ページ内の要素の HTML を記述するか、 document.createElement() を使用して動的に生成します。 .
• DOM 内の要素を検索します: document.getElementById() を使用して要素を取得します。
• イベント リスナーを正しく追加します: addEventListener() を使用するイベント リスナー。アラート関数を直接渡す代わりに、匿名関数でラップしてイベント発生時に実行します。

修正されたスクリプトは次のようになります。

<code class="javascript">document.write("<div id=\"myDiv\">I am a div</div>");
el = document.getElementById("myDiv");
el.addEventListener("click", function() { alert("clicktrack"); }, false);</code>

次のようになります。これらの手順により、DOM 内に要素が存在するとイベント リスナーがその要素にアタッチされ、要素がクリックされるとイベントがトリガーされます。

以上が提供されたコンテンツに基づいて、質問形式で考えられる記事タイトルをいくつか示します。 * **動的要素に追加すると、ページの読み込み時に JavaScript `addEventListener` が起動するのはなぜですか?** * **Hの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。