結合イベントをバインド
1 バインド(タイプ、データ、FN) 2 パラメータ説明 3。 タイプ(文字列):イベント・タイプ 4 データ(オブジェクト):イベントオブジェクトに渡されたプロパティ値として(任意)追加データevent.data 。5 Fn(ファンクション):上記の一致するイベントハンドラの各要素に結合 6。 //バインドパラメータは、受信パラメータe.data選択される通過 7。 $(「ボタン」)結合(「クリック」、{「A」: 'B'}、FN) 。8 関数fn(E){ 9 にconsole.log(e.data) 10 にconsole.log(e.data.a) 。11 } 12は、 13である $( 'ボタン')。バインド( 'クリック' 、FN) 14 関数fn(E){ 15 はconsole.log( 'ワッハッハー') 16 } 17 18であります 速記メソッド名として//イベント名 19。 $( 'ボタン')をクリック({ 'A': 'B'}、FN)。 20は 関数fn(E){ 21がある にconsole.log(e.data) 22は コンソール。 (e.data.a)対数 23である } 24 25 $( 'ボタン')。クリック(FN) 26は、 関数fn(E){ 27 はconsole.log( 'ワッハッハー') 28 }
アンバンドリングイベント
$(セレクタ).unbind(タイプ、FN); パラメータの説明] タイプ(文字列):イベントの(任意)タイプ Fn(ファンクション):各事象から(オプション)要素がバインド解除一致しましたイベントハンドラ 説明 1.バインド()バインディングを削除するには、マッチした要素の各々からのイベント、逆の動作です。 2.パラメータがない場合は、バインドされているすべてのイベントが削除されます。 3. 2番目のパラメータとしてバインドするときにハンドラが渡された場合は、これだけ特定のイベントハンドラが削除されます。
一般的なイベント
(関数(){...}をクリック )// シングルイベント ぼかし(関数(){...} //)がフォーカスを失った フォーカス(関数(){...} )//がフォーカスを取得 変更(機能を(){...})//マウスが離れたときに、入力フレームの内容が変更トリガ keyUpイベント(関数(){...} )// プレストリガ・イベントに対応するキーボード27は、キーボード番号e.keyCodeを取得するためにESCであります マウスオーバー/マウスアウト//親要素がイベントに上結合されている場合、親要素のサブ要素がある場合、サブ要素にたびに、親要素の上にイベントをトリガする のMouseEnter / mouseleave =ホバー(関数( ){...} )//マウスが一時停止します
イベントバブリング
このオブジェクトは、このイベントのためのハンドラを定義した場合、あなたが本当のこのイベントハンドラやイベントを定義しない場合、戻り値は、オブジェクト上(などのonclickイベントクリックなど)特定のイベントをトリガし、その後、このイベントは、オブジェクトの親オブジェクトになりますスプレッドは、内側に出て、それが処理されるまで(すべての同様のイベントの親オブジェクトがアクティブになります)から、またはそれはつまり、トップレベルの目標レベルに到達し、文書オブジェクト(一部のブラウザウィンドウ)。
1 < スタイル> 2 .outer { 3 幅:300ピクセル。 4 高さ:300ピクセル。 5 背景色:赤。 6 } 7 .inner { 8 の幅:100pxに。 9 高さ:100pxに。 10 背景色:forestgreen 。 11 } 12 </ スタイル> 13 14 < ボディ> 15 < DIV クラス= "外側" > 16 < DIV クラス= "内側" > </ DIV > 17 </ DIV > 18 </ ボディ> 19 20 < スクリプト> 21 $(' 。外側' ).click( 22 関数(){ 23 アラート(' 外側') 24 }) 25 $(' .inner ' ).click( 26ある 機能(E){ 27 アラート(' インナー' ) 28 // e.stopPropagation()//イベントがバブリング防止方法。1つの 29 リターン falseに //の停止イベントバブリング法2 30 }) 31である </ スクリプト>
イベントバブリング方法の一般的な組織
[方法]デフォルト動作をキャンセルし、事件を防ぐためにfalseを返すことにより、泡立ち。
举例:
。$( "フォーム")バインド( "提出"、機能(){falseを返します;})
[二] event.preventDefaultスルー方法は、()メソッドは、イベントバブリングを防止します
例えば:
$( "フォーム")に結合する( "送信"、関数(イベント){ するevent.stopPropagation(); });
イベントのデリゲート
原理:バブリングの原理を使用して、イベントが効果の実行をトリガし、親に追加されます。
役割:
新しく作成された要素のための1. 2.優れたパフォーマンス、直接イベントを持つことができます
イベントソース:
このロールを持つような(彼は操作者が誰であるか、疑問視するポイントが表示されません)、イベントオブジェクトの下で
使用シナリオ:
-
多くの要素と同じイベントのためのDOMバインディング。
-
DOMイベントバインディング要素がまだ存在していません。
構文:
ON(イベント、セレクタ、データ、FN)、 イベント(文字列):1つ以上のスペースイベントタイプ セレクタ(文字列):セレクタ文字列、選択された子孫要素をフィルタリングするためのイベントをトリガすることができ要素の データ:イベントがトリガされたとき、event.dataは、イベントハンドラに渡されます。 FN:コールバック関数は ******ここでは、セレクタは、このセレクタが置かれ、jQueryオブジェクトを入れていない、ことに注意する必要があります******
例
。$ ON( 'DIV')( 'クリック'、 'ボタン'、{ 'A': 'B'}、機能(イベント){ はconsole.log(event.data) アラート(「許さポイント「) }) ではなく親要素にボタン要素のクリックイベントに委譲のdiv 持つことができ、ボタンのクリックイベントの後で追加
ページのロード
1 document.onload =関数(){ 2 //コードJS 。3 } 4 window.onload =関数(){ 。5 $( "ボタン")をクリックして(関数(){ 6 アラート(「許容点「) 7 }) 8 } 9 onloadイベントは、すべての文書は、オーディオとビデオに追加されるまで待たなければならないが、トリガーの前に終了した 10 度だけ結合のonload 11 12 ドキュメントがロードされた後だけ待つように、// jQueryの方法を実行することができ、あなたは同じHTMLページにすることができマルチユース 13は$(ドキュメント).ready( 14 関数(){ 15 行うことができ、文書の完了後に添加// 16 }) 。17 18である// jQueryの方法を(略す)***** 19 $(関数(){ 20れる //文書の完了後に添加を行うことができる 21 }) 22は 23である。//例 24 $(関数(){ 25 $( 'ボタン')をクリック(関数(){ 26であります 警告(「許可ポイント」) 27 }) 28 }) 29 30 // jQueryのオーディオおよびビデオを含むすべてのリソースを待っているが、コードの機能の実行前にロードされた、繰り返し使用することができます 31です$(ウィンドウ).ready( 32 関数(){ 33が アラート( '123') 34です )}
各
各()メソッドは、各整合素子の所定の動作の関数として定義されます。
jQueryの各メソッドは、すべてのパラメータ一つのサブ要素メソッド呼び出しずつために設けられています。そして、jQueryオブジェクトの各メソッドは、jQueryのバイコール内のサブエレメントを提供することです。
1つの 構文構造 2 $(セレクタ).each(関数(指数、エレメント)) 。3 、実施例 4 < ボディ> 5 < UL > 6 < リチウム>オプション1 </ 李> 7 < リチウム>オプション2 </ 李> 8 < 李>オプション3 </ 李> 9 </ UL > 10 </ ボディ> 11 < スクリプト> 12であります $("で' ).Each( 13である 関数(IND、DOM){ // アクティブ各インデックスがIND送信され、オブジェクトタグの1つ当たりのDOM 14 にconsole.log(IND、DOM) 15 } 16 ) 。17 </ スクリプト>