32

はdocument.ready、DOM が完全にロードされた後にコードを実行するために使用されます。これは、ページ上の要素にイベント ハンドラーをアタッチするために使用できます。

$(function(){ 
    $('#somediv').click(function(){ 

    }); 
}) 

<div id="somediv"> </div>

DOMContentLoaded内部的には、jQuerywindow.onloadはフォールバックとして接続します。IE の場合、成功するまでビューポートを何度もスクロールしようとします。

いくつか質問があります。最初の質問は、イベント ハンドラーをそれ自体にバインドするときに、そのコードを?documentに配置する必要があるかどうかです。document.ready私は常に以下のコードをラップせずに書いてきましたdocument.ready

$(document).keydown(function(e){
    if (e.which == 39) { 
       alert( "right arrow pressed" );
       return false;
    }
});

ご覧のとおり、動作します。私の理解では、このコードはドキュメント内のどの要素にも接続していませんが、ドキュメント自体に接続しているため、document.readyハンドラーでラップする必要はありません。私がそれをラップしないもう1つの理由は、バニラのjavascriptで同じことをしていたからです。

document.onkeydown = function(){
var keyCode = event.keyCode || event.which;   
    if (keyCode == 39) { 
       alert( "right arrow pressed" );
       return false;
    }
}

人々が でラップする投稿を数多く見てきましたがdocument.ready、このコードを でラップしないことの欠点はありますdocument.readyか?

また、この質問は、DOM が構築されている間に何が起こるかについての私の明確さの欠如から生じていると思います。そのため、誰かが DOM の準備が整う直前の期間に何が起こるかを説明できれば. HTML が解析されて DOM ツリーに変換されると 、ドキュメントの準備が整います。

要約すると、ここに私の質問があります

  1. イベント ハンドラーをdocumentそれ自体にバインドする場合、そのコードをdocument.ready.
  2. でコードをラップしないことの欠点はありdocument.readyますか?
  3. document.readyドキュメントが構築されているとき、が起動 される直前に、どのようなイベント シーケンスが発生しますか?
4

7 に答える 7

33

ドキュメント自体にバインドしている場合は、準備が整うまで待つ必要はありません。この場合、 document.ready にラップしないことによるマイナス面はありません。

document.ready は、ブラウザーによって DOMReady イベントがトリガーされたとき、または DOMReady イベントをサポートしていないバージョンのブラウザーで特定のテストが成功したときに発生します。

追加情報。 (12/5/22)

最新のブラウザーのほとんどは、ドキュメントで定義されたすべての要素を JavaScript で操作する準備ができたときに発生するDOMContentLoadedイベントを実装しています。他のブラウザーは、ドキュメントの readystate を継続的にチェックする setTimeout ループに依存するか、ドキュメントの onreadystatechanged メソッド ( jquery coreから取得) に直接バインドします。ドキュメント自体は、JavaScript が実行される前に操作できる状態になっているため、ドキュメントに直接バインドするときに待機する必要はありません。

ここで唯一の問題は、コードがドキュメント以外の要素と対話する場合、それらの要素が存在する前にドキュメントでイベントがトリガーされる可能性があることです。それが起こる可能性は非常に低いですが、起こる可能性があります。それがコードで発生する可能性がある場合は、$(document).ready()そのシナリオを防ぐためにそれを の中に配置するのが理にかなっています。あなたのサンプルは の中に配置されることを保証しません$(document).ready()。

于 2012-05-17T19:22:11.230 に答える
11

ポイントは$(document).ready、ドキュメント全体が解析された後にコードを実行することです。

まだ存在しない要素を使用する場合にのみ使用する必要があります。
(たとえば、スクリプトが にある場合<head>)

使用している要素が既に存在する場合 (それらがグローバルであるか、<script>その下にあるため)、それは必要ありません。

于 2012-05-17T19:22:47.353 に答える
5

ブロック内のドキュメントにイベントをバインドしないことの唯一の欠点は、document.readyすべてのページ コンテンツが読み込まれる前にイベントが発生する可能性があることです。これは望ましくない場合があります。

于 2012-05-17T19:21:42.117 に答える
4

このイベントは、DOM階層が完全に構築されたとき、つまりすべてのアセットが作成されたときにトリガーされます画像など完全に受け取られました。

あなたは尋ねました：

  • イベントハンドラーをドキュメント自体にバインドする場合、そのコードをdocument.readyに配置する必要がありますか？
    • 回答：いいえ。document.ready()CSSスタイルプロパティの値に依存するコードを使用する場合は、コードが存在するスクリプトを参照する前、またはブロックの直前に、外部スタイルシートを参照するか、スタイル要素を埋め込むことが重要です。
  • document.readyでコードをラップしないことの欠点はありますか？
    • 回答：いいえ。ただし、JavaScriptを使用してドキュメント内に要素を作成する必要がある場合は、DOMの準備が整うまで待つ必要があります。このためには、コードをdocument.ready()ブロック内に配置する必要があります。
  • document.readyが起動される直前に、ドキュメントが作成されているときに発生する一連のイベントは何ですか？
    • 回答：document.readyが起動される前にDOMContentLoaded、ブラウザーによって既にトリガーされています。
于 2012-05-21T12:36:07.457 に答える
2

要素に対してアクションを使用する場合、または要素を呼び出す場合（DOMで生成されるか、まだ存在しない）、を使用する必要があります。$(document).ready

于 2012-05-17T19:26:59.850 に答える
1

答えに加えて、jqueryライブ機能を（キーダウンなどの代わりに）使用するだけで、「DOM要素を終了する必要がある」という状況から解放されます。

したがって、次は適切に機能する必要があります。

$( "#somediv" ).live( 'keydown', function(){ ... } );

この場合、jQuery は可能な場合にイベントをバインドします。すべてのバインディングを 1 つの ( ready ) 関数に配置するのに苦労する必要はありません。バインディングは、HTML ページまたは Javascript ファイルの独立した部分に配置できます。

したがって、結果の答えは次のとおりです。いいえ、上記の関数を使用する場合、コードを document.ready に配置する必要はありません。

アップデート

jQueryの最後のバージョン(>= 1.7)では、 live()の代わりにon()関数を使用します。これは、最後の関数が廃止されたためです。そのため、イベント バインディングを ready() に配置する必要はありません。

于 2012-05-17T19:40:23.927 に答える
1

1. イベント ハンドラーをドキュメント自体にバインドする場合、そのコードを document.ready に配置する必要がありますか?

いいえ。実際、JQ でバインドするための 'on' メソッドはドキュメントでデリゲートできるため、stopPropagation でコンテナ要素で多くのバブリングが停止されない限り、いつでもどの要素でも安全に使用できます。

2. document.ready でコードをラップしないことの欠点はありますか?

ヘッド内のそのスクリプトだけが、まだ存在しない HTML をヒットしようとする可能性があります。逆に言えば、ドキュメントの準備が整う前に、HTML の準備が整い、ユーザーからイベントを取得する可能性があります。'on' メソッドまたは google 'event delegation' を参照して、イベントが関係する場所でケーキを食べたり食べたりします (注意点は、stopPropagation を愚かに使用するライブラリです)。document.ready は、ほとんどの場合、HTML がヒットする準備が整ったときにコードが確実に実行されるようにするための手段にすぎません。body タグの一番下にあるコードは、(おそらく) body 自体に何かをぶつける場合を除き、必要ありません。

3. ドキュメントが構築されているとき、document.ready が起動される直前に、どのようなイベント シーケンスが発生しますか?

ドキュメントの準備ができた時点で、すべてのタグが解析され、レイアウトの寸法が確立されています。画像が完全にロードされている必要はありません。推測にすぎませんが、レイアウトに影響を与えない CSS は、一部のブラウザーではまだ有効になっていない可能性があります。要素の終了タグが HTML パーサーによって読み取られて実行されると、要素は「準備完了」と見なされます。スクリプト タグ内の JS は、HTML の解析を続行する前にインタープリターによって処理する必要があります。そのため、最近ではコードをドキュメントの最後に配置して、読み込み時間を短縮する傾向があります。

于 2012-05-24T15:12:56.820 に答える