jQueryでイベントをバインドする4つの方法を紹介

jQueryは、イベントをバインドするための様々な方法を提供しており、それぞれの方法には特徴があります。それらの違いを理解することで、コードを書く際に適切な選択をすることができ、美しく簡単にメンテナンスできるコードを書くことができます。以下では、jQueryでイベントをバインドする方法について見てみましょう。

jQueryには、bind、live、delegate、onの4種類のイベントリスナー方式があり、それぞれの解除リスナー関数はunbind、die、undelegate、offです。それらを見る前に

一：bind(type,[data],function(eventObject))

bindは使用頻度が高い方法で、選択された要素に特定のイベントタイプのリスナー関数をバインドする機能です。パラメータの意味は以下の通りです：

type:イベントのタイプで、click、change、mouseoverなどがあります;

data:リスナー関数に渡すパラメータで、event.dataを通じて取得できます。オプションです;

function:リスナー関数で、eventオブジェクトを渡すことができます。ここでのeventはjQueryがエンキャップしたeventオブジェクトで、原生的なeventオブジェクトとは異なります。使用する際には注意が必要です。

bindのソースコード：

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
$('#myol li').bind('click',getHtml);

bindの特徴は、リスナーをターゲット要素にバインドすることで、一つ一つにリスナーをバインドします。ページ上の要素が動的に追加されない場合に使用すると、問題ありませんが、リストに動的に「リスト要素」が追加される場合には、5”，これをクリックしても反応はありません。再びbindする必要があります。面倒くさがるためには、liveを使用できます。

jQueryには、a.click(function(){});やa.change(function(){});などのショートカットのイベントバインディング方法がありますが、これらの機能はbindと同じで、単なるショートカットに過ぎません。

二：live(type, [data], fn)

liveのパラメータとbindが同じですが、それが何故奇妙なのか、まずはソースコードを見てみましょう：

live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}

liveメソッドはリスナーを自分(this)にバインドするのではなく、this.contextにバインドしています。このcontextは何ですか？63;これは要するに要素の限定範囲です、以下のコードを見てください：

$('#myol li').context; //document
$('#myol li','#myol').context; //document
$('#myol li',$('#myol')[0]); //ol

通常、私たちは第3の方法のように選択子を使用することはありませんので、このcontextは通常documentであると考えられます、つまりliveメソッドはリスナーをdocumentにバインドしています。リスナーを直接要素にバインドしないと、イベントデリゲートメカニズムを思い出しましたか？63;もしあれば、ここをクリックして思い出してください。liveはイベントデリゲートメカニズムを利用してイベントのリスニング処理を完了し、ノードの処理をdocumentに委譲します。リスニング関数では、event.currentTargetを使用して現在捕捉されているイベントのノードを取得することができます。以下の例を見てみましょう：

$('#myol li').live('click',getHtml);

三：liveにはそのような欠点がありますので、私たちは考えました、老人が重い負担をかけているのであれば、リスナーをdocumentにバインドする必要はありません、近い親要素にバインドすることで良いでしょう。正常な論理に従って、delegateが生まれました。

引数が一つ増えました、selectorはイベントをトリガーするターゲット要素を指定するために使われます、リスナーはこのメソッドを呼び出す要素にバインドされます。ソースコードを見てみましょう：

delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}

またonが呼び出され、selectorがonに渡されています。このonは本当に重要なもののようです。それでもまずは見てみましょう：

$('#myol').delegate('li','click',getHtml);

これだけ見てるだけで、あなたはこのonの本質を見たいと思っているでしょう、今すぐ見てみましょう：

on(type,[selector],[data],fn)

パラメータはdelegateとほぼ同じですが、微妙な違いがあります。まず、typeとselectorの順序が入れ替わっており、次にselectorがオプションとなっています。入れ替わった理由は特定できませんが、視覚的により快適にするためでしょうか。

まずselectorを渡さない例を見てみましょう：

$('#myol li').on('click',getHtml);

event.currentTargetはli自身であり、bindの効果と同じです。selectorを渡すと、delegateと同じ意味になります。パラメータの順序が異なるだけで、他はすべて同じです。

onの実際の役割を見つけたので、これほど多くのイベントバインド方法がある中で、どのように選択するか考えましょう。63

実際には、この問題を気にする必要はありません。なぜなら、彼らの違いを既に知っているはずですか？63実際の状況に応じて使用してください。ただし、公式の推奨では、onを使用することをお勧めします。なぜなら、他の方法はすべて内部でonを使用して完了するため、onを使用することで効率が向上し、他の3つの書き方を完全にonで置き換えることができます。どのように置き換えるかについて詳しくは説明しませんが、違いを理解すると自然と難しくありません。

以上は編集者が皆様に紹介したjQueryイベントバインドの4つの方法です。皆様に役立つことを願っています。何かご不明な点がございましたら、コメントを残してください。編集者は迅速に回答いたします。皆様の呐喊教程サイトへのサポートに感謝しています。

声明：本文の内容はインターネットから収集されており、著作権者はすべての権利を保持しています。コンテンツはインターネットユーザーによって自発的に提供され、アップロードされています。本サイトは所有権を持ちません。人工的な編集は行われていません。また、関連する法的責任も負いません。著作権侵害が疑われる内容を見つけた場合は、お気軽にお問い合わせください：notice#oldtoolbag.com（メール送信時は、#を@に置き換えてください。申し訳ありませんが、関連する証拠を提供していただければ、本サイトは直ちに侵害が疑われる内容を削除します。内容が事実であると確認された場合、即座に対応いたします。）