trigger,triggerhandlerシミュレーションイベント
4831 ワード
よく使うシミュレーション
ユーザー操作をシミュレートすることで、クリックの効果を達成する必要がある場合があります.たとえば、ユーザーがページに入るとclickイベントがトリガーされ、ユーザーがアクティブにクリックする必要はありません.
JQueryではtrigger()法を用いてシミュレーションを行うことができる.例えば、idがbtnのボタンであるclickイベントをトリガするには、次のコードを使用することができる.
これにより、ページのロードが完了すると、すぐに目的の効果が出力されます.同様の効果を達成するためにclick()を直接簡単に書くこともできます
カスタムイベントのトリガー
trigger()メソッドは、ブラウザがサポートする同じ名前のイベントだけでなく、カスタム名のイベントもトリガーします.たとえば、要素に「myClick」のイベントをバインドします.JQueryコードは次のとおりです.
trigger(type[event,data])メソッドには2つのパラメータがあり、1番目のパラメータ(type)はトリガするイベントタイプであり、2番目のパラメータはイベント処理関数に渡す追加データであり、配列形式で渡される.通常、コールバック関数にパラメータを渡すことで、今回のイベントがコードによってトリガーされたのか、ユーザーによってトリガーされたのかを区別できます.
次に、データを転送する例を示します.
パラメータ転送の設定:どの条件がトリガーされるかを識別します.
関数呼び出しの実行
デフォルトの操作を実行
trigger()メソッドがイベントをトリガーすると、ブラウザのデフォルト操作が実行されます.例:
以上のコードは、要素にバインドされたfocusイベントをトリガーするだけでなく、要素自体に焦点を当てます(これはブラウザのデフォルト操作です).
ブラウザのデフォルト操作を実行せずにバインドされたfocusイベントのみをトリガーしたい場合は、jQueryの別の類似の方法であるtriggerHandler()メソッドを使用します.
このメソッドは、要素にバインドされた特定のイベントをトリガーし、ブラウザのこのイベントに対するデフォルトの操作をキャンセルします.すなわち、テキストボックスはバインドされたfocusイベントのみをトリガーし、フォーカスは得られません.
ユーザー操作をシミュレートすることで、クリックの効果を達成する必要がある場合があります.たとえば、ユーザーがページに入るとclickイベントがトリガーされ、ユーザーがアクティブにクリックする必要はありません.
JQueryではtrigger()法を用いてシミュレーションを行うことができる.例えば、idがbtnのボタンであるclickイベントをトリガするには、次のコードを使用することができる.
$('#btn').trigger("click");
これにより、ページのロードが完了すると、すぐに目的の効果が出力されます.同様の効果を達成するためにclick()を直接簡単に書くこともできます
$('#btn').click();
カスタムイベントのトリガー
trigger()メソッドは、ブラウザがサポートする同じ名前のイベントだけでなく、カスタム名のイベントもトリガーします.たとえば、要素に「myClick」のイベントをバインドします.JQueryコードは次のとおりです.
$('#btn').on("myClick", function(){
$('#test').append("<p> .</p>");
});
$('#btn').trigger("myClick");
trigger(type[event,data])メソッドには2つのパラメータがあり、1番目のパラメータ(type)はトリガするイベントタイプであり、2番目のパラメータはイベント処理関数に渡す追加データであり、配列形式で渡される.通常、コールバック関数にパラメータを渡すことで、今回のイベントがコードによってトリガーされたのか、ユーザーによってトリガーされたのかを区別できます.
次に、データを転送する例を示します.
$(function(){
$('#btn').on("myClick", function(event, message1, message2){
$('#test').append( "<p>"+message1 + message2 +"</p>");
});
$('#btn').click(function(){
$(this).trigger("myClick",[" "," "]);
}).trigger("myClick",[" "," "]);
パラメータ転送の設定:どの条件がトリガーされるかを識別します.
$(function(){
$('#btn').on("myClick", function(event, a,b){
alert( a + b );
});
$('#btn').click(function(){
alert(' ')
}).trigger("myClick",[' ',' ']);
})
関数呼び出しの実行
$(function(){
$('#btn').on("aaa", function(e, message1, message2){
('#test').text( e.pageX ); // XY , trigger
});
$('#btn').click(function(){
$(this).trigger("aaa",[aa(),bb()]);
}).trigger("aaa",[aa(),bb()]);
function aa(event){
var e =window.event || ent ;
alert(' ');
$('#test').text( e.pageX );
}
function bb(){
alert(' ');
}
});
デフォルトの操作を実行
trigger()メソッドがイベントをトリガーすると、ブラウザのデフォルト操作が実行されます.例:
$("input").trigger("focus");
以上のコードは、要素にバインドされたfocusイベントをトリガーするだけでなく、要素自体に焦点を当てます(これはブラウザのデフォルト操作です).
ブラウザのデフォルト操作を実行せずにバインドされたfocusイベントのみをトリガーしたい場合は、jQueryの別の類似の方法であるtriggerHandler()メソッドを使用します.
$("input").triggerHandler("focus");
このメソッドは、要素にバインドされた特定のイベントをトリガーし、ブラウザのこのイベントに対するデフォルトの操作をキャンセルします.すなわち、テキストボックスはバインドされたfocusイベントのみをトリガーし、フォーカスは得られません.