jQueryで動的なページを作ろうと考えているこの記事を読んでいる方は，on()メソッドの使い方やイベントの種類にどんなものがあるか知りたくて調べたのではないでしょうか！今回はjQueryでは必須の「on()メソッド」について解説していきます！

jQueryのon()メソッドとは．．．

「on()メソッド」とはズバリ！「特定の出来事が起こるタイミングで実行したい処理を設定するメソッド」のことです！

Webページには動的なアニメーションが組み込まれているものがあります！例えば，「ハンバーガーメニューをクリック又はタップすることでメニューが開く」，「スライドショーが自動で切り替わる」「スクロール量に応じてコンテンツが左右に動く，フェードインする」などがあります．

ここでの特定の出来事とは，これらのクリックやスクロールのことを指します！この特定の出来事のことを「イベント」と呼び，イベントの種類のことを「イベントタイプ」と呼びます．さらにイベントごとに設定されている，実行したい処理のことを，「イベントハンドラ」と呼びます．

on()メソッドの使い方

on()メソッドはHTMLの要素に対して使用します．on()メソッドの構文は以下の通りです．

$('セレクタ').on( 'イベントタイプ', function(){
  //イベント発生時に実行したい処理
});

「セレクタ」はクラスでもIDでもタグでも可能です．1つ目の引数にイベントタイプを渡し，2つ目の引数にイベントハンドラを渡します．

まずは，第一引数に渡すイベントタイプの種類についてみていきましょう！

on()メソッドの第一引数　主要イベントタイプ

全てではありませんが，主要なイベントタイプ一覧です．個人的には，太字で示したイベントはよく使われているような気がします！

「mouseover」と「mouseout」はCSSの「:hover」に近い処理が可能です．より複雑なホバーエフェクトを実装できます．

「load」イベントは，ページ のロードが終了するまではページタイトルのみの簡単な要素だけを表示し，ロード終了時に全ての要素をフェードインさせるアニメーションを作ることもできます．

「scroll」イベントは，「window」に対して設定されることが多いです．例えばページをスクロールしていくと，次々とコンテンツがフェードインしてくるようなアニメーションに使えます．

ここでは一部を紹介しましたが，全てを覚える必要はないと思います．こんなイベントがあったなぐらいの感覚で大丈夫です！

on()メソッドの第二引数　イベントハンドラ

イベントハンドラは関数の形で渡します．関数の中身は実装したい処理によって変わってくるのはもちろんのことなのですが，代表的なものを3つほど紹介します．

css()メソッド

jQueryを使用して，特定の要素にCSSプロパティーを追加するメソッドです．書き方は以下の通りです．

$('セレクタ').css({
     'プロパティ' : '値',
     'プロパティ' : '値',
     'プロパティ' : '値',
     'プロパティ' : '値',
});

特定の要素に複数のCSSを追加する方法です．CSSを直接追加できるので，とても使いやすいメソッドです．詳しい使い方は下記のサイトを参考にしてみてください！

.css() | jQuery 1.9 日本語リファレンス | js STUDIO

http://js.studio-kingdom.com/jquery/css/css

addClass(), removeClass(), toggleClass()

まず「addClass()」メソッドは特定の要素に指定したクラスを追加します．追加するクラス名でCSSを定義しておけば，クラスの有無でCSSの追加を行えます．「removeClass」メソッドは特定の要素にある，指定したクラスを消去します．この２つのクラスは対でよく使うので抑えておきましょう．

「toggleClass()」メソッドは，特定の要素に指定したクラスがなければ追加し，あれば消去するメソッドです．

3つのクラスの使い方は以下の通りです．

$('セレクタ').addClass('クラス名');

$('セレクタ').removeClass('クラス名');

$('セレクタ').toggleClass('クラス名');

animate()メソッド

「animate()」メソッドは処理をアニメーション化するメソッドです．アニメーション内容を引数に指定します．基本的な使い方は以下の通りです．

$('セレクタ').animate({
     'プロパティ' : '値',
     'プロパティ' : '値',
     'プロパティ' : '値',
     'プロパティ' : '値',
   }, アニメーション時間
);

第一引数にはアニメーションさせたいプロパティーを指定します．背景色や透明度，ボーダーの幅，フォントサイズなど，CSSと同じように指定します．第二引数にはアニメーション時間をミリ秒で指定します．これは現在の値から，指定した値までにかかる時間のことです．

他にも，イージング（アニメーションの変化方法）や，アニメーション後の処理を引数に渡したりすることもできます．詳しい使い方は下記のサイトを参考にしていてください．

.animate() | jQuery 1.9 日本語リファレンス | js STUDIO

http://js.studio-kingdom.com/jquery/effects/animate

まとめ

on()メソッドはjavascriptの特徴でもある，非同期処理を実装するための非常に重要なメソッドです．今回はjQueryで解説を行いましたが，Node.jsでも同じメソッドがあります．同じように，イベントに対する処理を記述します．

フロントエンドでもバックエンドでも多用されるメソッドなのでかならず押さえておきましょう！

.on() | jQuery 1.9 日本語リファレンス | js STUDIO

http://js.studio-kingdom.com/jquery/events/on