質問: ``` (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'); }); ``` (a):新しい div や p を追加してもすべて動作する (b):既存の div p と既存の div に p を追加した場合のみ動作する (c):既存の div p にのみ動作する(追加した要素では動作しない) という理解で合っているでしょうか。 div が追加されないと分かっている場合は、(a)と(b)のどちらの書き方が望ましいでしょうか。 ・処理速度 ・メモリ使用量 などにおいて違いがありますか?
回答: (a), (b), (c)の理解は問題ないです。 > > div が追加されないと分かっている場合は、(a)と(b)のどちらの書き方が望ましいでしょうか。 > > > これはイベント登録後に `p` を追加するが、 `div` 自体は追加しない、という理解でよろしいでしょうか。その場合は特に理由がない限り (b) を勧めます。 (a) はドキュメント上に存在するすべての要素に対してjQuery側の処理が発生してしまい、処理効率が悪いです。 (b) や (c) は `div` が極端に多い場合においてメモリを消費する問題がありますが、そうでなければ気にする必要はありません。例え多くても、 `div` の親要素を設けて、そこに `$("親要素を指定").on("click", "div p", function() {})` のようにイベントを貼れば解決できます。