JQueryをはじめてみる(2) イベントの仕組み(2)

JQueryをはじめてみる(2) イベントの仕組み(2)_jquery

WBOY

リリース： 2016-05-16 18:14:29

オリジナル

948 人が閲覧しました

簡単に言うと、Jquery のイベント処理メカニズムは、onclick() や keydown() などの HTML タグでさまざまなイベントを指定することに相当します。タグでのイベントの指定は Javascript 関数に対応しており、これにより私の要件を達成することが容易になります。 JQuery のイベント処理は、これらのイベントをスクリプト内にバインドするため、タグ内で関数を公開する必要がなく、非常に便利に使用できます。

このメソッドを紹介する前に、イベントに応答するための 2 つの戦略を説明する必要があると感じます。1 つはイベントキャプチャ、1 つはイベントバブル (イベントバブル)、これら 2 つの戦略は反対であり、ブラウザ戦争でそれぞれ Netscape と Microsoft によって提案された 2 つの完全に反対のイベント伝播モデルです。イベントバブリングは、オブジェクトで特定のタイプのイベント (onclick イベントなど) をトリガーするものとして定義されます。オブジェクトがこのイベントのハンドラーを定義している場合、イベントはこのハンドラーを呼び出します。イベントハンドラーを呼び出すか、イベントが true を返すと、このイベントは、処理されるまで (親オブジェクトの同様のイベントがすべてアクティブ化される)、またはオブジェクトに到達するまで、このオブジェクトの親オブジェクトに内部から外部に伝播します。階層のレベル。イベントキャプチャは、イベントバブリングの逆です。イベント処理は、オブジェクトの最外層から終了するまで内部に伝播されます。 W3C アノテーションは 2 つのイベント処理戦略をサポートしていますが、イベントキャプチャには多くのバグがあるため、現在 IE はイベントキャプチャをサポートしておらず、他のブラウザは基本的に両方をサポートしているため、イベントバブリングが優先されます。以下にイベントのバブリングの例を示します。実際に試してみるとわかります。イベントのキャプチャについては忘れてください。

コードコードは次のとおりです:

< ;head>
JavaScript イベントのバブリング >

閉じる

JQuery でイベント戦略を阻止するメソッドは
event.preventDefault() です。
(

デフォルトの動作を防止します)、
event.stopPropagation();event.stopImmediatePropagation();
(

イベントのバブリングを防止します)、直接返します

return false;
(はデフォルトの動作と時間バブリングを防止します)。イベント処理には、bind(type,[data],fn)、bind(map)、one(type,[data],fn)、trigger(type,[data])、triggerHandler(type,[ data])、unbind([type],[data])これらのメソッド。

1.bind(type,[data],fn)

は、指定されたイベント処理関数を指定された要素にバインドするために使用されます。[data] は、オプションで渡されたパラメーターを表します。

コードをコピーします

コードは次のとおりです:

 
//パラメータを使用したバインディングメソッド
$("#text").bind('click', { result: "yes" }, function(event) { 
alert(event .data .result); 
}) 
//パラメータなしでバブリングを防止します
$("#text").bind('click', function(e) { 
// カスタム処理動作 
e.stopPropagation(); 
}) 

実際には、イベントをバインドするメソッドの 1 つである、bind(type,[data],fn) の略称があります。違いは、短縮メソッドではバインドのようにパラメータ[data]を指定できないことです。書き方は次のようにバインドで型パラメータを直接実行します。コード

コードは次のとおりです。 $("#text").click(function(e) { //カスタマイズされた処理動作alert ("abbreviation");

})

 
2. 
bind(map)
 は、次のように記述します。 >

コードをコピー

コードは次のとおりです: $('#text ').bind({ click: function() { alert("bind(map) バウンドクリックイベント"); },

mouseenter: function() {

alert( "バインド(マップ)バインドされたマウス入力イベント"); 

3, 
one(type,[data],fn)
指定イベントは一度だけ実行され、書き方もbind()メソッドと同じなのでここでは説明しません。

4. trigger(type,[data])、triggerHandler(type,[data])実際には同じ効果があり、一致する要素ごとにトリガーされます特定の型の場合イベントの唯一の違いは、前者はイベントバブリングイベントを実行するのに対し、後者は指定された要素でのみイベントを実行することです。比較してみましょう:

コードをコピーコードは次のとおりです:

//HTML コード:
;br/ >

code$("#triggerdiv").click(function() {

alert("DIV トリガー");

}); 
$("#trigger").click(function( ) { 
$("#tri").trigger("click"); 
$("#triggerHandler").click(function() { 
$("# tri") .triggerHandler("click"); 
}); 
$("#tri").click(function() { 
alert("サブセット DIV トリガー"); 
} ); 

 
5. 
unbind([type],[data])
 は、type パラメーターが指定されている場合に、これよりも単純です。を指定しない場合、指定されたイベントが削除されます。指定されていない場合は、指定された要素のすべてのイベントが削除されます。 


 これらの仕組みの中で、私が最もよく使うのがバインドメソッドであり、最もよく使われるのはその略称です。もちろん、これらのイベント メカニズムは、ビジネス ニーズに応じて組み合わせて使用​​できます。 



以前、私が書いたことは単純すぎると言う人もいましたが、私が話しているのは長い間 JQuery に触れていないということです。自分自身の記憶を深め、JQuery を学習したばかりの友人に教えるためです。これは単なる情報であり、私が JQuery に優れていると言うわけではありません。誰もが一緒に学び、進歩できることを願っています。続く…