.on()の定義について この２つの違いはあるでしょうか？

Question

jQuery初心者です。
的はずれな質問してるかもしれません。ご了承下さい。

.on()の定義について色々あるのだと知りました。
以下の２つは、何か動作や使い方に違いはあるのでしょうか？

$(document)のonで定義、その中に処理内容を記述

$(document).on('click', '.hoge', function() {
  //処理内容
});

要素のonで定義、処理内容は別メソッド

$('.hoge').on('click', onClick);

function onClick() {
    //処理内容
}

先輩方教えて下さい。
宜しくお願いします。

Comments

[退会済みユーザー]

キャプチャリングとバブリングというのがあるのを知ってますか？

[pecchan]

コメント有難う御座います。
いえ、存じ上げません。

[退会済みユーザー]

ググって調べてください。それを知っているといないのとでは話の通じ方が変わってきますので。

[pecchan]

有難う御座います。
ググってみました。
イベントが発生する順序が違うんですね。
初めて知りました！

[hentaiman]

onする元（？）が違う事について聞きたいのかfunctionを別で定義している事を聞きたいのか
疑問点をひとつの絞った質問にした方が回答付くとは思いますが

[m.ts10806]

offのこともたまには思い出してあげてください

[pecchan]

hentaiman様
なるほど、最初の書き方は、functionを別にできるわけですね。
そこも分かってないほどでした。有難う御座います。

[pecchan]

m.ts10806様
何か笑っちゃいましたｗｗ
はい、offさんも忘れないようにします

[退会済みユーザー]

http://surferonwww.info/Test/183-EventCapturingBubbling2.htm ← キャプチャリングとバブリングを試すサンプルですが、試してみると面白いかも（面白くなかったらすみません）。コードはその記事にリンクを張った先にありますので興味がありましたら見てください。

[pecchan]

いや、めちゃくちゃ面白いです！！
こうやって試していかないと頭に入らないので助かります！
有難う御座います！

Answer 1

一番大きな違い（使い分け）は、前者はdocumentに設定するので
ページのロードを待たずに設定できます。
つまり動的に作成するようなHTML要素にイベントを予めつけておきたいときに有効です。
たいていの場合後者で十分です

Comments

[pecchan]

とても分かりやすい解説有難う御座います！