18

違いは何ですか：

$(document).ready(initialize);

と

$(document).on('ready', initialize);

私には、それらは同じように機能するように見えます。

4

2 に答える 2

18

$(document).on('ready',initialize); ファイルの実行時に DOM がすでに準備されている場合は機能しません。

$(document).ready()これには特別な処理があります。常に呼び出されるようにします

于 2012-11-27T17:07:23.783 に答える
8

TL;DR

  • $(document).on('ready', ...)DOMが完全に解析された後にバインドされたコールバックを実行しないため、非推奨です。第一引数にイベントオブジェクトを取得します。

  • $().ready()jQueryへの参照が最初の引数として渡されます。

詳細な回答

$(document).on('ready', initialize);

この式は、他のイベント ハンドラから期待されるように、readyイベント ハンドラを にバインドしています。これを使用して DOM Ready をリッスンすることは、jQuery 1.8で非推奨になりました。document

もあり$(document).bind("ready", handler)、jQuery 1.8で非推奨になりました。これはメソッドと同様に動作しreadyますが、ready イベントが既に発生していて.bind("ready")、バインドされたハンドラーを実行しようとすると、実行されません。この方法でバインドされた Ready ハンドラは、上記の他の 3 つのメソッドによってバインドされた後に実行されます。

これreadyはカスタム イベントであり、jQuery によって内部的にトリガーされることに注意してください。これは、手動でトリガーできることも意味します。これにより、問題が発生する可能性があります。

$(document).ready(initialize);

この式は、実際にはイベント ハンドラーをバインドしません。DOM が完全に解析されたときに実行されるコールバックを登録jQuery.fn.readyするための専用メソッドです。jQuery はpromiseオブジェクトにコールバックを追加しており、どのセレクターに渡すかは問題ではありません。$

さらに、コールバックには、イベントオブジェクトではなく jQuery オブジェクトへの参照が渡されます。

ソース コードの次の部分は、このように登録されたコールバックが異なる方法で処理されることをうまく示しています。

// If there are functions bound, to execute
readyList.resolveWith(document, [jQuery]);

// Trigger any bound ready events
if (jQuery.fn.trigger) {
    jQuery(document).trigger("ready").off("ready");
}
于 2012-11-27T17:15:28.977 に答える