jQueryのtrigger()メソッドを使用してイベントを自動的にトリガー

5499 ワード

一、よく使う事件
ページのロードが完了すると自動的にinputのクリックイベントがトリガーされ、移動端で自動ポップアップ入力法が実現され、フォーカスが得られる
$("input").trigger("click").focus();

もう1つの簡単な書き方があります.
$("input").click();

他にも事件は一つ一つリストされていない.
 
二、カスタムイベント
$("#btn").on("myClick",function(){
   alert("     ");
});

$("#btn").trigger("myClick");

 
三、伝達パラメータ
trigger(tpye[,datea])メソッドには2つのパラメータがあり、1つ目のパラメータはトリガーするイベントタイプであり、2つ目の単数はイベント処理関数に渡す追加のデータであり、配列形式で渡される.通常、コールバック関数にパラメータを渡すことで、今回のイベントがコードによってトリガーされたのか、ユーザーによってトリガーされたのかを区別できます.
$("#btn").bind("myClick", function (event, message1, message2) { //    
    $("#test").append("p" + message1 + message2 + "");
});
$("#btn").trigger("myClick",["     ","  "]); //      

$(“#btn”).trigger("myClick",["マイカスタマイズ","イベント");//2つのデータを渡す
 
四、デフォルト操作を実行する
triger()メソッドがイベントをトリガーすると、ブラウザのデフォルト操作が実行されます.例:
$("input").trigger("focus");

以上のコードは、input要素にバインドされたfocusイベントだけでなく、input要素自体に焦点を当てる(ブラウザのデフォルト操作).
ブラウザのデフォルト操作を実行せずにバインドされたfocusイベントのみをトリガーしたい場合は、jQueryの別の類似の方法であるtriggerHandler()メソッドを使用します.
$("input").triggerHandler("focus");

このメソッドはinput要素にバインドされた特定のイベントをトリガーし、ブラウザがこのイベントのデフォルト操作をキャンセルします.すなわち、テキストボックスはバインドされたfocusイベントをトリガーし、フォーカスが得られません.
 
チュートリアルの参照先:http://blog.csdn.net/lijunling2008live/article/details/7457396
シミュレーションを頻繁に使用
ユーザー操作をシミュレートすることで、クリックの効果を達成する必要がある場合があります.たとえば、ユーザーがページに入るとclickイベントがトリガーされ、ユーザーがアクティブにクリックする必要はありません.
JQueryにあります.trigger()メソッドを使用してシミュレーション操作を完了できます.例えば、idがbtnのbuttonであるclickイベントをトリガするには、以下のコードを用いることができる.1 $( '#btn' ).trigger( "click" );
これにより、ページの読み込みが完了します.すぐに目的の効果を出力します.click()を直接簡単に書くこともできます.同じ効果を得るには、次の手順に従います.1 $( '#btn' ).click();
自己定義イベントのトリガー
trigger()メソッドは、ブラウザがサポートする同じ名前のイベントをトリガーするだけでなく、自分で名前を定義したイベントをトリガーすることもできます.たとえば、要素に「myClick」のイベントをバインドします.JQueryコードは、例えば以下のようになります.1 $( '#btn' ).bind( "myClick" , function (){   2       $( '#test' ).append( "

.

"
);   3   });
このイベントをトリガーするには、次のコードを使用します.1 $( '#btn' ).trigger( "myClick" );
データの転送
trigger(type[,data])メソッドには2つのパラメータがある.1番目のパラメータはトリガするイベントタイプで、2番目のパラメータはイベント処理関数に渡す追加データで、配列形式で渡されます.
通常、コールバック関数にパラメータを渡すことで、今回のイベントがコードによってトリガーされたのか、ユーザーによってトリガーされたのかを区別することができます.
次は、データを転送するサンプルです.1 $( function (){   2     $( '#btn' ).bind( "myClick" , function (event, message1, message2){   3                   $( '#test' ).append( "

"

+message1 + message2 + "" );   4      });   5     $( '#btn' ).click( function (){   6          $( this ).trigger( "myClick" ,[ " " , " " ]);   7     }).trigger( "myClick" ,[ " " , " " ]);   8 })
デフォルト操作の実行
trigger()メソッドがイベントをトリガーすると、ブラウザのデフォルト操作が実行されます.例:1 $( "input" ).trigger( "focus" );
以上のコードは、エレメントにバインドされたfocusイベントだけでなく、エレメント自体に焦点を当てます(これはブラウザのデフォルト操作です).
ブラウザのデフォルト操作を実行せずにバインドされたfocusイベントのみをトリガーしたいと仮定すると、jQueryにはtriggerHandler()メソッドと同様の方法があります.1 $( "input" ).triggerHandler( "focus" );
このメソッドは、エレメントにバインドされた特定のイベントをトリガーし、ブラウザがこのイベントのデフォルト操作をキャンセルします.すなわち、テキストボックスはバインドされたfocusイベントのみをトリガーし、フォーカスは得られません.