jQuery_jquery の 3 つのバインド/One/Live イベント バインディング メソッドを分析する

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

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

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

bind の最初のパラメータは次を表します: イベント タイプ (追加する必要がないことに注意してください)。関数内のコードは実行したいロジック コードです。
複数のイベント バインディング: バインドによりバインドすることもできます。複数のイベントを指定し、イベント名をスペースで区切ります。例:

$('a').bind('マウスオーバーをクリック',function(){

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

$('a').bind({
click:function(){alert('a');},
mouseover:function(){alert('a また!' )}

関数関数では、JavaScript オブジェクトを関数メソッドに渡すこともできます。このイベント オブジェクトは通常は省略できます。
バインドにはパラメータデータもあります。このパラメータは通常、同じメソッドで同じ変数を処理する問題を解決するために使用されます。

var productname="スポーツ シューズ";
$('#Area').bind('click',function(){
alert(productname);
});

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

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

var productname="スポーツ シューズ";
$('#Area').bind('click',{pn:productname},function(){
alert(event.data. pn);
});
productname="ネックレス",
$('#Area').bind('click',{pn:productname},function(){
alert(イベント.データ.pn);
});

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

$('a').one('click',function(){
alert('a');
})

ページ上の a 要素をクリックすると、メッセージがポップアップ表示されます。ユーザーが 2 回目のリクエストを開始しない限り、a 要素を再度クリックしてもメッセージ ダイアログ ボックスは表示されません。

3. live
このメソッドは主に動的に追加された要素を処理し、後で追加された要素にイベントをバインドすることもできます。

$('a').live('click,function(){
alert('メッセージを表示!');
})

次に要素を追加すると、

$('body').appnend('別の要素');

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

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