ホームページ >ウェブフロントエンド >jsチュートリアル >jquery onとbindの違いは何ですか
jquery onとbindの違いは何ですか
- coldplay.xixiオリジナル
- 2020-11-25 16:29:092935ブラウズ
jquery on と binding の違い: 1.bind メソッドは各子要素にイベントを追加するため、パフォーマンスに影響しますが、on メソッドは影響しません; 2.bind が動的に要素を追加する場合、イベントは追加できません。動的にバインドすることができ、 on メソッドはそれが可能です。
このチュートリアルの動作環境: Windows 7 システム、jquery バージョン 1.10.2. この方法は、すべてのブランドのコンピューターに適しています。
jquery on と binding の違い:
on() メソッド ソース コードを表示すると、bind() と ## が見つかります。 #delegate()最下層は on() メソッドを使用して実装されます;
栗をあげる:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
<button id="add">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script>
$("#add").click(function(){
$("div").append("<p>这是一个新的p元素</p>");
});
</script> 使い方: $('div p').bind('click',function(){
alert($(this).text());
})
$("div").on("click","p",function(){
alert($(this).text());
})
メリットとデメリットの比較:
# bind() メソッド:欠点:
1. サブ要素が多すぎる場合、各サブ要素にイベントを追加するとパフォーマンスに影響します。
2. 要素を動的に追加する場合、イベントを動的にバインドすることはできません
利点: イベントを単一の要素にバインドするときに記述すると便利 (無視)
on() メソッド:1 .上記 2 つの欠点を解決します。
2. イベント委任メカニズムを使用します。イベントを p 要素に直接バインドする代わりに、イベントをその親要素 (またはdiv 内の場合 任意の要素をクリックすると、イベントがバインドされた要素に到達するまでイベント ターゲットからレイヤーごとにバブルアップされ、イベントが実行されます。
##3. 通話時に問題が発生する場合もあります。イベント ターゲットが DOM ツリーの非常に深いところにある場合、セレクターに一致する要素を見つけるためにレイヤーごとにバブルアップすると、パフォーマンスに影響します。セレクターによって一致する要素が多数あります。2 を反復的にバインドするために、bind() を使用しないでください。ID セレクターを使用する場合は、bind()3 を使用できます。動的にバインドする場合は必須です。要素を追加するには、delegate() または on()4 を使用します。delegate() メソッドと on() メソッドを使用します。DOM ツリーは深すぎないようにしてください
5。on を使用してみてください。 ()関連する無料学習の推奨事項:
javascript(ビデオ)
以上がjquery onとbindの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。