jQueryを使って独自イベントを要素に追加する方法

jQueryで任意のタイミングで実行される独自のイベントを追加したい・・・

そういう場合はtrigger関数を使うのがスマートな方法です。

そういう訳でここではjQueryのtrigger関数で独自イベントを追加する方法について紹介

trigger関数で独自イベントを設定する手順

trigger関数というのはあるイベントを任意の場所で呼び出すためのjQuery関数です。

別に独自イベント専用の関数ではないですが、上手く使えばオリジナルのイベントも実行できます。

その手順は次の通り

  1. ある要素で独自イベントのtrigger関数実行
  2. 独自イベントに対してコールバック関数設定

trigger関数を木庭の要素で呼び出して、コールバック関数を指定するだけです。

 

とはいっても言葉じゃわかりにくいので具体的な例を使って説明しましょう。

例えばここではあるボタンが押された後に任意のイベントを実行してみたいと思います。

その手順は次の通り

1. 要素で独自イベントのtrigger関数実行

まず次のようなボタン要素を用意したとします。

ここではこのボタンが押された後に afterclick  という独自のイベントタイプを発生させましょう。

 

そのためのコードは次の通り

$(this).trigger('afterclick');  のようにtrigger関数にイベントタイプを渡すだけです。

ちなみに説明するまではないかもですが $(this)  は $('#click_me_btn')  と同じ要素を表します。

2. 独自ベントに対してコールバック関数指定

次は今triggerで実行した afterclick  に対してコールバック関数を設定します。

これは普通のやり方と同じようにon関数に対してイベントタイプを渡せばOKです。

 

その具体的なコードは次の通り

ボタンがクリックされた後に afterclick  に結び付けられたコールバックが実行されます。

全体のコードと動作例

以上が独自イベントの設定手順です。

 

ちなみに全体のコードを載せると次のような感じ

 

あと実際にどのような動作になるかは次のCodePenを参照

See the Pen 【jQuery】triggerで独自イベント作成 by ぴー助 (@pisuke-code) on CodePen.

ボタンがクリックされた後に「Clicked click_me_btn」というアラートが表示されるだけです。

 

独自イベントの基本的な設定方法はこれだけ

trigger関数に独自のイベントタイプを渡せばいいだけなので簡単です。

独自イベントに引数をとらせるには

trigger関数で呼び出すイベントには引数をとらせることも可能です。

やり方はtrigger関数の2つめの引数に配列としてひとまとめで引数を渡すだけ

引数の数はいくらでも取れます。

 

例えば次は先ほどの afterclick  のコードを少しだけ改造したコード

上のコードは afterclick  が起きた時に引数にアラートで表示するメッセージを受け取っている例

処理を説明すると $(this).trigger('afterclick', 'HogeHoge');  で1つの引数を追加

そのあと afterclick  のコールバック関数の  function(event, message)  で引数を受け取ってます。

ただしイベントのコールバックは必ず1つめにイベント自体を受け取ることに注意

 

以上が独自イベントに対して引数をとらせる手順です。

独自イベントのコールバック側では分からない情報を渡すことができます。

ここまでのまとめ

独自イベントの設定手順をまとめると

  1. 任意の場所である要素にtrigger関数実行
  2. 独自イベントのコールバック関数指定

という単純な手順を実行するだけです。

これに加えて引数などをとれば独自に拡張したイベントが簡単に作れますね。

 

以上jQueryで独自イベントを作成する方法でした。

ではでは($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください