44980

[code]

    (a)
    $(document).on("click", "div p", function () {
      alert('hoge1');
    });
    
    (b)
    $("div").on("click", "p", function () {
      alert('hoge2');
    });
    
    (c)
    $("div p").on("click", function () {
      alert('hoge3');
    });
    
[/code]

(a)：新しい div や p を追加してもすべて動作する  
(b)：既存の div p と既存の div に p を追加した場合のみ動作する  
(c)：既存の div p にのみ動作する（追加した要素では動作しない）  
という理解で合っているでしょうか。

div が追加されないと分かっている場合は、(a)と(b)のどちらの書き方が望ましいでしょうか。  
・処理速度  
・メモリ使用量  
などにおいて違いがありますか？


CC BY-SA 4.0
2018-06-20T15:08:59.323
44928
2018-06-22T03:02:43.630
3925
question
javascript jquery
jQuery .on() のセレクタの書き方について


(a), (b), (c)の理解は問題ないです。

> div が追加されないと分かっている場合は、(a)と(b)のどちらの書き方が望ましいでしょうか。

これはイベント登録後に `p` を追加するが、 `div` 自体は追加しない、という理解でよろしいでしょうか。その場合は特に理由がない限り (b)
を勧めます。 (a) はドキュメント上に存在するすべての要素に対してjQuery側の処理が発生してしまい、処理効率が悪いです。

(b) や (c) は `div` が極端に多い場合においてメモリを消費する問題がありますが、そうでなければ気にする必要はありません。例え多くても、
`div` の親要素を設けて、そこに `$("親要素を指定").on("click", "div p", function() {})`
のようにイベントを貼れば解決できます。


CC BY-SA 4.0
2018-06-22T03:02:43.630
44980
2018-06-22T03:02:43.630
19925
44928
answer