（jQueryの学習）イベント：動的に追加された要素にイベントを埋め込む

本日は、
動的に追加された要素にイベントを埋め込む方法を考えます。

動的に追加・・・とは、
アンケートを例にすると、
ある選択肢の回答結果によって質問内容を切り替えるような画面（画面遷移はしない）で、
それぞれの質問にイベントを埋め込みたいときが該当します。

簡単に書くと、
　最初に表示されたボタン（要素）ではなく、
　追加されたボタン（要素）にもイベントを埋め込みたい
ときに使います。

ボタンを押すイベントは「clickイベント」でハンドリングします。
こんな感じで実装しますよね？

$(function() {
  $("input").click(function(){
    // ・・・clickイベント発生時の処理・・・
  });
});

実はこのイベントは静的な要素にしか反応しません。
つまり、最初に表示されたボタン（要素）にしか反応しないのです。

では、いつものように試してみたいと思います。
『ボタンを押すと、↓の領域にテスト用のボタンが追加されます。』というボタンを押すと、
その言葉通りにボタンが増殖します。
この増えたボタンと、『最初からあったボタン』を押し比べてみてください。

◆イベントの静的ハンドリングの実装例

$(function() {
  $("ボタン要素").click(function(eo){
    $("要素-ログ出力").append("～ログ出力～");
  });
});

・・・いかがでしょうか？
『最初からあったボタン』のみclickイベントが反応しています。
（反応するとログを出力する動きにしています）


この増えたボタンにどうしてもイベントを埋め込みたい！！
・・・という方は、前回のエントリーにも登場した「.on()」を使ってください。

前回のエントリーでは、
１つの要素に複数のイベントが埋め込められますとサラッと触れただけですが、
今回はもう少し深く（でも、サラッと・・・）見てみたいと思います。

★onメソッドの構文

　[jQueryオブジェクト].on(イベント, セレクタ, イベント発生時の処理)
　【引数】
　　・イベント：イベントの名称を指定します（clickとかdblclickとか）
　　・セレクタ：[jQueryオブジェクト]から埋め込む対象の要素をさらに絞り込むときに使います（無くてもOK）
　　・イベント発生時の処理：その名の通りです

注意点としては、
要素に対して動的にイベントを埋め込む必要があるため、
イベント発生ごとにhtml全体をチェックすることになります。
結果、処理負荷が掛かり、レスポンスに影響を及ぼす場合があります。

それでは、先に提示したサンプルを「.on()」に置き換えてみましょう。

◆イベントの動的ハンドリングの実装例

$(function() {
  $("body").on("click", "ボタン要素", function(eo){
    $("要素-ログ出力").append("～ログ出力～");
  });
});

いかがでしょうか？
追加したボタンにもclickイベントが反応するようになりました。

今回は最初の[jQueryオブジェクト]を「bodyタグ」にしましたが、
余計な要素に反応しても困るので、
可能であればもう少し反応する範囲を狭めた方が良いと思います。

それでは、また。

（jQueryの学習）イベント：１つの要素に複数のイベントを埋め込む

本日は、
１つの要素に対して、複数のイベントを埋め込む方法を考えます。

例えば・・・
ターゲットとなる要素を、
クリックしてもダブルクリックしても、ハンドリングしたいとします。
このような場合は↓のように実装すれば問題ありません。

$(function() {
  $("input").click(function(){
    // ・・・clickイベント発生後の処理・・・
  });
  $("input").dblclick(function(){
    // ・・・dblclickイベント発生後の処理・・・
  });
});

・・・が、コードが冗長になってしまいますね。

このようなときに便利なのが「.on()」です。
指定の要素に対して任意のイベントを組み込むことができるようになります。

基本的な使い方は以下の通りです。

$(function() {
  $("input").on('***', function(){  // ←1個以上の組み込みたいイベントを指定
    // ・・・組み込んだイベント発生後の処理・・・
  });
});

先ほどのclickイベントとdblclickイベントの例では、以下のように記述します。

$(function() {
  $("input").on('click dblclick', function(){  // ←半角スペースで区切る
    // ・・・clickイベントとdblclickイベント発生後の処理・・・
  });
});

これではclickイベントとdblclickイベントに対して、
同じ処理を行うことになってしまいますね。
もし、clickイベントとdblclickイベントで、
それぞれ別の処理を実行したいのであれば、次のようにします。

$(function() {
  $("input").on('click dblclick', function(eo){  // ←イベントオブジェクト[eo]を追記
    if (eo.type == "click") {  // ←イベントオブジェクトから発生したイベントを取り出す
      // ・・・clickイベント発生後の処理・・・
    } else {
      // ・・・dblclickイベント発生後の処理・・・
    }
  });
});

もう少し応用してみます。
マウスのカーソルが「当たってから外れるまで」の間に何かしらの処理を実行します。
※今回の例では、任意の領域を消したり出したりしてます。

ここまでのやり方では、下のような感じでしょうか。

◆マウスオーバー⇒アウトの実装例（その１）

$(function() {
  $("要素").on('mouseover mouseleave', function(eo){
    if (eo.type == "mouseover") {
      $(this).fadeOut();
    } else {
      $(this).fadeIn();
    }
  });
});

ここにマウスのカーソルを当ててください

わざわざ発生したイベントによって処理を振り分けるのは、
ちょっとややこしい印象がありますね。

これをもっとシンプルにしてみます。

◆マウスオーバー⇒アウトの実装例（その２）

$(function() {
  $("要素").mouseover(function(){
    $(this).fadeOut();
  }).mouseleave(function(){
    $(this).fadeIn();
  });
});

ここにマウスのカーソルを当ててください

このようにイベントを繋いで書くことで、よりシンプルにできますね。

さらにmouseoverとmouseleaveを使うなら、hoverを使えば一発です。

◆マウスオーバー⇒アウトの実装例（ホバーを使う）（その３）

$(function() {
  $("要素").hover(function(){
    $(this).fadeOut();
  },function(){
    $(this).fadeIn();
  });
});

ここにマウスのカーソルを当ててください

hoverイベントは、
カンマの前が「マウスオーバーの処理」で、
カンマの後が「マウスアウトの処理」で構成されてます。

いかがでしょうか？
要素にイベントを埋め込む方法一つ取ってもいろんな実現方法が存在します。
ケース・バイ・ケースで柔軟に対応できるようになれると良いでしょう。

それでは、また。