第6回 イベント編:連載:jQuery逆引きリファレンス(11/14 ページ)
特定の要素セットに対して、イベント・リスナを設定したり、指定したイベントを実行したりするためのメソッドをまとめた、すぐに役立つ13本を一挙公開。
triggerメソッドを利用することで、要素セットに関連付いたイベント・リスナを実行することができます。<event>()メソッドと似ているように思われるかもしれませんが、triggerメソッドでは、引数として任意のパラメータ値を渡せる点が異なります。
具体的な例も見てみましょう。以下は、ボタンに関連付いたclickイベント・リスナを、<div>要素をダブルクリックしたタイミングで実行する例です。ただし、<div>要素をダブルクリックした場合には、あらかじめ指定したパラメータ値もイベント・リスナに引き渡すものとします。
<script type="text/javascript">
$(function() {
// ボタン・クリック時にダイアログボックスを表示
$('#btn').click(function(e, param) {
window.alert('値:' + param);
});
// <div>要素をダブルクリックしたときに、
// ボタン・クリックのイベントを発生
$('#listen').dblclick(function() {
$('#btn').trigger('click', ['WINGSプロジェクト']);
});
});
</script>
……中略……
<form>
<input type="button" id="btn" value="クリック!" />
<div id="listen">ダブルクリックしてください</div>
</form>
このHTMLを実際にブラウザで開く
triggerメソッドの引数dataには配列リテラル([……])の形式でパラメータ値を指定します。そして、このパラメータ値を受け取っているのがリスト100の太字の部分です。このように、イベント・リスナの第2引数以降で取得できるのです。
もしも複数のパラメータを渡したい場合には、次のように必要な数だけ引数を追加します。
$('#btn').click(function(e, param, param2, param3) {
サンプルの結果を確認すると、直接ボタンをクリックした場合にはパラメータは渡されませんので、引数paramの値はundefined(未定義)であることが、<div>要素をダブルクリックした場合には、triggerメソッド経由でパラメータが渡されていることが、それぞれ確認できます。
Copyright© Digital Advantage Corp. All Rights Reserved.