私はしばらく js を勉強していましたが、その過程で、jQuery でイベントをバインドするときに、bind() を使用する人、on() を使用する人、そして live を使用する人がいることに気づきました。 () コードを見ると機能は実装されているような気がしたのでスルーしていたのですが、まだ違いがよく分からなかったので今日調べて自分なりにまとめてみました。 。
バインディングメソッドの種類が多いのは、jQueryのバージョンが更新されたためです。例えばon()メソッドは1.7以降に登場しました。
jQuery イベント バインディング API ページでは、live() メソッドは廃止されており、使用は推奨されないと記載されています。ここでは主に、bind()、delegate()、on()
の 3 つのメソッドを見ていきます。さまざまなタイプのイベント バインディングをテストするための HTML ページを用意しています。
<html>
<head lang="en">
<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="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script>
$("#btn").click(function(){
$("div").append("<p>这是一个新的p元素</p>");
});
</script>
</body>
</html>
div、いくつかの p 要素、div 内のボタンを含む単純なページ。ボタンをクリックして p 要素を追加します。次に、クリック イベントをページ上の p 要素にバインドします。
バインド()
使用法
このようにして、クリック イベントは div 内のすべての p 要素にバインドされ、応答はそのコンテンツをポップアップします。バインディングはシンプルかつ高速ですが、ここには 2 つの問題があります:
最初の質問は、ここで暗黙的反復法が使用されているということです。一致する要素が多すぎる場合、たとえば div に 50 個の p 要素を配置すると、バインディングを 50 回実行する必要があります。要素の数が多い場合、パフォーマンスに影響します。
ただし、ID セレクターの場合、ID は一意であるため、bind() メソッドを使用すると非常に高速になります。
2 番目の問題は、まだ存在しない要素をバインドできないことです。ページ上のボタンをクリックすると、p 要素が動的に追加されます。この p 要素をクリックすると、アクションの応答がないことがわかります。
これら 2 つの問題は、デリゲート メソッドを使用して解決できます。
さらに、bind() メソッドの略語もあります。
と置き換えることもできます。デリゲート()
使用法
このアプローチでは、イベント委任の概念が使用されます。イベントを p 要素に直接バインドする代わりに、イベントをその親要素 (または祖先要素も) にバインドします。div 内の任意の要素をクリックすると、イベントはイベント ターゲットに達するまでレイヤーごとにバブルアップされます。イベントをバインドする要素 (この例の div 要素など)。バブリング プロセス中に、イベントの currentTarget がセレクターと一致すると、コードが実行されます。
これにより、bind() メソッドを使用する際の上記 2 つの問題が解決されます。p 要素にイベントを 1 つずつバインドする必要がなく、動的に追加された p 要素をバインドすることもできます。イベントをドキュメントにバインドする場合でも、ドキュメントがバインドを実行する準備ができるまで待つ必要はありません。
このようにバインドは簡単ですが、呼び出し時に問題が発生することもあります。イベント ターゲットが DOM ツリーの非常に深いところにある場合、セレクターに一致する要素を見つけるためにレイヤーごとにバブリングすると、パフォーマンスに影響します。
on()
on() は、実際には以前のバインディング イベント メソッドを統合しています。jQuery の非圧縮ソース コード (ここで参照しているバージョンは 1.11.3) を見ると、bind() と delegate() の両方が実際に統合されていることがわかります。 on() メソッドによって実現されるのは、パラメーターが異なるだけです。
上記の例では、次のように on() をバインドに使用できます。
公式ドキュメントの提案:
jQuery 1.7 の時点では、.on() メソッドはイベント ハンドラーをドキュメントにアタッチするための推奨メソッドです。
on() を使用してイベントをバインドしてみてください。
イベントを削除
は、bind()、delegate()、および on() バインディング メソッドに対応し、イベントを削除するメソッドは次のとおりです:
上記のように指定したイベント バインディングを削除するだけでなく、パラメーターを渡さずにすべてのイベント バインディングを削除することもできます。ここでは、jQuery の公式ドキュメントに詳細が記載されています。
概要
1. セレクターに一致する要素が多数ある場合は、bind() を使用して
を反復的にバインドしないでください。2. ID セレクターを使用する場合は、bind() を使用できます
3. 動的に追加された要素をバインドする必要がある場合は、delegate() または on() を使用します
4. delegate() メソッドと on() メソッドを使用します。DOM ツリーは深すぎないようにしてください
5. on() を使ってみる
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
