1

2 つのオプションがあります。

$("button").on('click',function(){
   $("#myDiv").prepend('<p>new paragraph</p>');
});
$('body').on('click','p',function(){
   console.log('clicked paragraph');
});

また

$("button").on('click',function(){
   $("#myDiv").prepend('<p>new paragraph</p>');
   $("p").on('click',function(){
      console.log('clicked paragraph');
   });
});

どちらが速くなりますか？どちらの方法でも既知の問題はありますか?

4

2 に答える 2

2

委任されたイベント ハンドラーの速度について心配する必要はありません。ただし、速度の違いは、ブラウザーがイベントを祖先 (自明) に伝播するのに時間がかかり、jQuery がその祖先 (bodyあなたの場合) に登録されている委任ハンドラーのセレクターを実際のパスに対してチェックするのにかかる時間です。イベントがかかりました（これも些細なことです）。

ただし、実際の要素のハンドラーが最初にトリガーされることに注意してください。そのため、イベントがbody. これは通常、委任されたハンドラーの最大の問題です。

ただし、2 番目のコード スニペットには問題があることに注意してください。段落を追加するたびに、click既存の段落にハンドラーを設定していることになります。これには、既にクリック ハンドラーを配置したものも含まれます。あなたはおそらくそれを避けたいでしょう。:-)

2 番目の例を使用したいが、その問題を回避したい場合は、次のようにすることができます。

$("button").on('click',function(){
   $('<p>new paragraph</p>').prependTo("#myDiv").on('click',function(){
      console.log('clicked paragraph');
   });
});
于 2013-07-07T17:05:09.993 に答える
0

正直なところ、何回も何回もやらないと違いはわかりません。2番目のソリューションはよりクリーンだと思いますが、クリックできない目的でpタグを使用することを妨げないように変更します。

$("#myDiv").find('p').on('click',function(){
    console.log('clicked paragraph');
 });
于 2013-07-07T17:04:42.100 に答える