jQueryの3つのバインド/ワン/ライブイベントバインディングの使い方を詳しく解説

この記事では主に jQuery の 3 つのバインド/One/Live イベント バインディング メソッドを紹介します。必要な方はぜひ参考にしてください。

jQuery は優れた JavaScript フレームワークです。古いバージョンでは主に、bind() メソッドを使用します。新しいバージョンでは、さらに 2 つのメソッド、One() と Live() の使用法を紹介します:

1。
jquery のイベント モデルには、bind と unbind という 2 つの基本的なイベント バインディング関数があり、これら 2 つの関数の意味は、ページ要素を照合し、関連するイベントを処理することです。たとえば、JS でよく使用する onfocus、onblur、onmouseover、onmousedown などのイベントをバインド パラメーターとして渡すことができます。

$("#id").bind('click',function(){alert('tt!')});

bind の最初のパラメータは以下を表します: イベント タイプ (注: 追加する必要はありません) )、関数内のコードは、実行するロジック コードです。複数のイベント バインド: バインドでは、イベント名をスペースで区切ることもできます (例:

$( 'a'))。 binding('click Mouseover',function(){

最新の jquery1.4 バージョンでは、bind メソッドが改良されました。bind メソッドに JSON のようなオブジェクトを渡して、一度バインドすることができます。 複数の イベントの処理

関数

$('a').bind({

click:function(){alert('a');},

mouseover:function(){alert('a again! ')}

関数関数では、JavaScript オブジェクトを関数メソッドに渡すこともできます。

Bind には、通常、問題を解決するために使用されることのないパラメーター データも含まれています。同じメソッドで同じ変数を処理します。

var productname="Sports Shoes";

$('#Area').bind('click',function(){

alert(productname);});


productname="necklace",

$('#Area').bind('click',function(){

alert(productname);});


変数 productname が再割り当てされるため、出力メッセージはすべて「ネックレス」です。ここで理解できない場合は、JavaScript の変数スコープを確認してください。この問題を解決するには、データ パラメーター

var productname ="Sports Shoes";

$ を使用する必要があります。 ('#Area').bind('click',{pn:productname},function(){

alert(event.data.pn);});
productname="ネックレス ",
$('#Area ').bind('click',{pn:productname},function(){
alert(event.data.pn);
});

2. 1 回限りのバインド一致した要素の特定のイベント (クリックなど) ごとのイベント ハンドラー。このメソッドはバインドメソッドと同じパラメータを持ちます。バインドメソッドとの違いは、一致する要素のイベント処理が一度実行されるだけであり、実行後に再度実行されることはありません。 Web リクエストが再開始されます。
$('a').one('click',function(){
alert('a');})

ページ上の a 要素をクリックすると、ユーザーが最初の 2 番目のリクエストを開始した場合、要素を再度クリックしてもメッセージ ダイアログ ボックスは表示されません。

3. live

このメソッドは主に動的に追加された要素を処理でき、後から追加された要素にイベントをバインドすることもできます。
$('a').live('click,function(){
alert('show message!');})

次に、要素を追加すると、

$('body' ).appnend('Another Element');

すると、この要素はイベント ハンドラー関数のアラートもトリガーします。

さらに、jQuery は、.bind('click') を簡素化する .click() など、これらの標準イベント タイプをバインドする簡単な方法もいくつか提供します。

次のイベント名は合計です:blur、focus、focusin、focusout、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select 、送信、キーダウン、キー押下、キーアップ、エラーなど。

以上がjQueryの3つのバインド/ワン/ライブイベントバインディングの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。