HTML内にjavascriptを置く

Question

私は、JSをHTMLの中に置くことに関して2つの質問があります。私はこれらの2つのポイントがどこに答えたのか見つけることができませんhere。

質問は基本的に

• ているのは、私は頭の中でJavascriptを入れて言うと、スクリプトはIDによって、いくつかのHTML要素を取得し、それをクリックハンドラを登録しようとしましょう。今、HTMLがまだ読み込まれていないので（スクリプトが頭で呼び出されているため）、これは機能しますか？
• 一方、DOMがロードされたときに呼び出されるheadに関数を登録して、その関数の中にボタンをクリックするハンドラを登録するコードを置くと、ユーザがボタンをクリックする機会があることを理解していますが、ハンドラは、DOM全体がまだロードされていないので（ボタンクリックハンドラが登録されているため）呼び出されません。私は正しいですか？

上記の2つの点を考慮して、JavaScriptでJavaScriptを使用する方法と最適な方法は何ですか？

Answer 1

はのは、私は頭の中でJavascriptを置くとしましょう、とスクリプトはIDによって、いくつかのHTML要素を取得し、そのためのクリックハンドラを登録 しようと言います。今すぐ 、HTMLはまだロードされていません（このスクリプトは と呼ばれています）。

いいえ、これは機能しません。 <script>タグが見つかるたびに、javascriptはすぐに実行されてからDOMビルドに進みます。 （、javascriptが外部の場合は、ネットワーク経由で取り出して実行します。）javascriptがgetElementByIdのようなDOM APIを使用している場合は、DOMの現在のスナップショットを処理します。スクリプトがidで要素を取得しようとすると、現在構築中のDOMから取得しようとします（すべてのDOM APIはDOM上で動作します）。要素がまだDOMに追加されていないので（我々はヘッドを処理しています）、要素を取得することはできません。要素を取得できないため、addEventListenerまたはonclickにnullにアクセスしようとするとエラーがスローされます。私は、ユーザー を理解し、次によう

頭の中で機能を登録する場合は、DOMがロードされたときに一方、 呼び出され、その関数の内部で、私はいくつかのボタンをクリックするためにどの 登録するハンドラのコードを入れて、いボタンをクリックするチャンスがありますが、 DOM全体がまだロードされていないため（ボタンがクリックされた ハンドラが登録されているため）、ハンドラは呼び出されません。私は正しいですか？

はい、正しいです。 DOMロードは、すべての要素がDOMに追加され、HTMLで定義された要素に対する操作の準備ができているという条件を一般化します。

また、window.loadは、DOMがロードされ、画像、動画などのすべての外部リソースも読み込まれた後にのみトリガーされます。それを使用すると、イベントの添付ファイルをさらに遅延させることができます。

すぐにイベントリスナーを追加する場合はどうすればよいですか？

イベントをすぐにバインドしたい場合は、インラインスクリプトを使用してイベントをバインドすることができます。通常は必須ではなく、良い方法ではありません。

<p>whatever</p> 
<button id="mybutton">Click me</button> 
<script> 
    document.getElementById('mybutton').addEventListener(... 
</script> 
<p>rest of HTML</p> 

また、これはあなたの代わりに頭のHTMLの最後にスクリプトを置けば、それはすべての要素がDOMに追加されていることを確認しますとDOMはDOM APIを使用して、任意の操作のための実用的に準備ができている、別の可能性を開きます。これは、DOMロードイベントを聞くのが簡単ではないときに広く使用されていました。私は正しい参照を見つけることができませんが、これはDoug Crockfordの勧告でした。