jQueryのtrigger()メソッドを使用してイベントを自動的にトリガー
5499 ワード
一、よく使う事件
ページのロードが完了すると自動的にinputのクリックイベントがトリガーされ、移動端で自動ポップアップ入力法が実現され、フォーカスが得られる
もう1つの簡単な書き方があります.
他にも事件は一つ一つリストされていない.
二、カスタムイベント
三、伝達パラメータ
trigger(tpye[,datea])メソッドには2つのパラメータがあり、1つ目のパラメータはトリガーするイベントタイプであり、2つ目の単数はイベント処理関数に渡す追加のデータであり、配列形式で渡される.通常、コールバック関数にパラメータを渡すことで、今回のイベントがコードによってトリガーされたのか、ユーザーによってトリガーされたのかを区別できます.
$(“#btn”).trigger("myClick",["マイカスタマイズ","イベント");//2つのデータを渡す
四、デフォルト操作を実行する
triger()メソッドがイベントをトリガーすると、ブラウザのデフォルト操作が実行されます.例:
以上のコードは、input要素にバインドされたfocusイベントだけでなく、input要素自体に焦点を当てる(ブラウザのデフォルト操作).
ブラウザのデフォルト操作を実行せずにバインドされたfocusイベントのみをトリガーしたい場合は、jQueryの別の類似の方法であるtriggerHandler()メソッドを使用します.
このメソッドはinput要素にバインドされた特定のイベントをトリガーし、ブラウザがこのイベントのデフォルト操作をキャンセルします.すなわち、テキストボックスはバインドされたfocusイベントをトリガーし、フォーカスが得られません.
チュートリアルの参照先:http://blog.csdn.net/lijunling2008live/article/details/7457396
シミュレーションを頻繁に使用
ユーザー操作をシミュレートすることで、クリックの効果を達成する必要がある場合があります.たとえば、ユーザーがページに入るとclickイベントがトリガーされ、ユーザーがアクティブにクリックする必要はありません.
JQueryにあります.trigger()メソッドを使用してシミュレーション操作を完了できます.例えば、idがbtnのbuttonであるclickイベントをトリガするには、以下のコードを用いることができる.
これにより、ページの読み込みが完了します.すぐに目的の効果を出力します.click()を直接簡単に書くこともできます.同じ効果を得るには、次の手順に従います.
自己定義イベントのトリガー
trigger()メソッドは、ブラウザがサポートする同じ名前のイベントをトリガーするだけでなく、自分で名前を定義したイベントをトリガーすることもできます.たとえば、要素に「myClick」のイベントをバインドします.JQueryコードは、例えば以下のようになります.
このイベントをトリガーするには、次のコードを使用します.
データの転送
trigger(type[,data])メソッドには2つのパラメータがある.1番目のパラメータはトリガするイベントタイプで、2番目のパラメータはイベント処理関数に渡す追加データで、配列形式で渡されます.
通常、コールバック関数にパラメータを渡すことで、今回のイベントがコードによってトリガーされたのか、ユーザーによってトリガーされたのかを区別することができます.
次は、データを転送するサンプルです.
デフォルト操作の実行
trigger()メソッドがイベントをトリガーすると、ブラウザのデフォルト操作が実行されます.例:
以上のコードは、エレメントにバインドされたfocusイベントだけでなく、エレメント自体に焦点を当てます(これはブラウザのデフォルト操作です).
ブラウザのデフォルト操作を実行せずにバインドされたfocusイベントのみをトリガーしたいと仮定すると、jQueryにはtriggerHandler()メソッドと同様の方法があります.
このメソッドは、エレメントにバインドされた特定のイベントをトリガーし、ブラウザがこのイベントのデフォルト操作をキャンセルします.すなわち、テキストボックスはバインドされたfocusイベントのみをトリガーし、フォーカスは得られません.
ページのロードが完了すると自動的に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イベントのみをトリガーし、フォーカスは得られません.