jQueryで任意のタイミングで実行される独自のイベントを追加したい・・・
そういう場合はtrigger関数を使うのがスマートな方法です。
そういう訳でここではjQueryのtrigger関数で独自イベントを追加する方法について紹介
このページの目次
trigger関数で独自イベントを設定する手順
trigger関数というのはあるイベントを任意の場所で呼び出すためのjQuery関数です。
別に独自イベント専用の関数ではないですが、上手く使えばオリジナルのイベントも実行できます。
その手順は次の通り
- ある要素で独自イベントのtrigger関数実行
- 独自イベントに対してコールバック関数設定
trigger関数を木庭の要素で呼び出して、コールバック関数を指定するだけです。
とはいっても言葉じゃわかりにくいので具体的な例を使って説明しましょう。
例えばここではあるボタンが押された後に任意のイベントを実行してみたいと思います。
その手順は次の通り
1. 要素で独自イベントのtrigger関数実行
まず次のようなボタン要素を用意したとします。
|
1 |
<button id="click_me_btn">Click Me</button> |
ここではこのボタンが押された後に afterclick という独自のイベントタイプを発生させましょう。
そのためのコードは次の通り
|
1 2 3 |
$('#click_me_btn').on('click', function(){ $(this).trigger('afterclick'); }); |
$(this).trigger('afterclick'); のようにtrigger関数にイベントタイプを渡すだけです。
ちなみに説明するまではないかもですが $(this) は $('#click_me_btn') と同じ要素を表します。
2. 独自ベントに対してコールバック関数指定
次は今triggerで実行した afterclick に対してコールバック関数を設定します。
これは普通のやり方と同じようにon関数に対してイベントタイプを渡せばOKです。
その具体的なコードは次の通り
|
1 2 3 |
$('#click_me_btn').on('afterclick', function(){ alert('Clicked click_me_btn'); }); |
ボタンがクリックされた後に afterclick に結び付けられたコールバックが実行されます。
全体のコードと動作例
以上が独自イベントの設定手順です。
ちなみに全体のコードを載せると次のような感じ
|
1 2 3 4 5 6 7 8 |
$(function(){ $('#click_me_btn').on('click', function(){ $(this).trigger('afterclick'); }); $('#click_me_btn').on('afterclick', function(){ alert('Clicked click_me_btn'); }); }); |
あと実際にどのような動作になるかは次のCodePenを参照
See the Pen 【jQuery】triggerで独自イベント作成 by ぴー助 (@pisuke-code) on CodePen.
ボタンがクリックされた後に「Clicked click_me_btn」というアラートが表示されるだけです。
独自イベントの基本的な設定方法はこれだけ
trigger関数に独自のイベントタイプを渡せばいいだけなので簡単です。
独自イベントに引数をとらせるには
trigger関数で呼び出すイベントには引数をとらせることも可能です。
やり方はtrigger関数の２つめの引数に配列としてひとまとめで引数を渡すだけ
|
1 |
$('elem').on('myevent', ['arg1', 'arg2']); |
引数の数はいくらでも取れます。
例えば次は先ほどの afterclick のコードを少しだけ改造したコード
|
1 2 3 4 5 6 7 8 |
$(function(){ $('#click_me_btn').on('click', function(){ $(this).trigger('afterclick', 'HogeHoge'); }); $('#click_me_btn').on('afterclick', function(event, message){ alert(message); }); }); |
上のコードは afterclick が起きた時に引数にアラートで表示するメッセージを受け取っている例
処理を説明すると $(this).trigger('afterclick', 'HogeHoge'); で１つの引数を追加
そのあと afterclick のコールバック関数の function(event, message) で引数を受け取ってます。
ただしイベントのコールバックは必ず１つめにイベント自体を受け取ることに注意
以上が独自イベントに対して引数をとらせる手順です。
独自イベントのコールバック側では分からない情報を渡すことができます。
ここまでのまとめ
独自イベントの設定手順をまとめると
- 任意の場所である要素にtrigger関数実行
- 独自イベントのコールバック関数指定
という単純な手順を実行するだけです。
これに加えて引数などをとれば独自に拡張したイベントが簡単に作れますね。
以上jQueryで独自イベントを作成する方法でした。
ではでは($・・)/~~~
