（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イベントは、
カンマの前が「マウスオーバーの処理」で、
カンマの後が「マウスアウトの処理」で構成されてます。

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

それでは、また。

（jQueryの学習）イベント：要素にイベントを埋め込む（その４）

本日は要素に組み込めるイベントの最終回です。

18.resize

説明	windowの大きさが変更されたタイミングで発生
サンプルソース	$(function() { // ↓他と異なり、windowでresizeイベントが捕捉できる $(window).resize(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源	（ブラウザのサイズを変えてください）
確認エリア	※イベントが発生するとログが出力されます。

19.scroll

説明	ドキュメントがスクロールしたタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("textarea").scroll(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源	スクロールバー を押してください ＊＊＊＊ ＊＊＊＊＊
確認エリア	※イベントが発生するとログが出力されます。

20.select

説明	type属性値が"text"のinput要素、 textarea要素のテキストが選択されたタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").select(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

21.submit

説明	フォームが送信されたタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").blur(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

最後は
　resize、scroll、select、submit
の4本を学びました。

scrollイベントは、
今回、textarea要素で確認しましたが、
スクロールバーが出るような要素（div、windowなど）でも発生します。

また、resizeイベントは、
その２で学んだloadイベントと同じく、
window要素に対して働く点が他のイベントと異なります。

それでは、また。

（jQueryの学習）イベント：要素にイベントを埋め込む（その３）

本日も要素に組み込めるイベントの続きです。

11.mousedown

説明	要素上でマウスが押されたタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mousedown(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

12.mouseenter

説明	マウスが要素に入ったタイミングで発生 （子孫要素に入ったタイミングでは発生しない）
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mouseenter(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

13.mouseleave

説明	マウスが要素から外れたタイミングで発生 （子孫要素から外れたタイミングでは発生しない）
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mouseleave(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

14.mousemove

説明	要素上でマウスが移動しているタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mousemove(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

15.mouseout

説明	マウスが要素から外れたタイミングで発生 （子要素でも発生）
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mouseout(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

16.mouseover

説明	マウスが要素に入ったタイミングで発生 （子要素でも発生）
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mouseover(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

17.mouseup

説明	要素上でマウスが押され、上がったタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mouseup(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

本日は
　mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup
の7本を学びました。
mouse***イベントは、key***と同じくいくつか種類があり、
それぞれ発生するタイミングが違うので注意が必要です。

それでは、また。

（jQueryの学習）イベント：要素にイベントを埋め込む（その２）

本日も要素に組み込めるイベントの続きです。

6.focus

説明	要素がフォーカス（マウスやタブキー）を得たタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").focus(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

7.keydown

説明	いずれかのキーが押し下げられたタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").keydown(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

8.keypress

説明	いずれかのキーが押されたタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").keypress(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

9.keyup

説明	いずれかのキーが押された後、上がったタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").keyup(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

10.load

説明	ドキュメント内の全リソースの読み込みが完了したときに発生
サンプルソース	$(function() { // ↓他と異なり、windowでloadイベントが捕捉できる $(window).load(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源	（このページをリロードしてください）
確認エリア	※イベントが発生するとログが出力されます。

本日は
　focus、keydown、keypress、keyup、load
の5本を学びました。
key***イベントは、
それぞれ発生するタイミングが違うので注意が必要です。
また、loadイベントはwindow要素に対して働く点は他のイベントと異なります。

それでは、また。

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

本日からはjQueryのイベントについて、学習していきます。

イベントとは、
ユーザがアプリケーションに対して何らかのアクションを掛けたときのことを表します。
例えば・・・
　・ボタンを押す
　・マウスでクリックする
　・キーボードでタイプする
・・・などのことです。
jQueryを使って、
これらのイベントをどのようにして判断するのか？を学びます。

各要素に埋め込んで、
捕捉できるイベントは21個ありますので、
1つずつサンプルを上げながら確認していきたいと思います。
（アルファベット順）

1.blur

説明	要素がフォーカス（マウスやタブキー）を失ったタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").blur(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

2.change

説明	要素がフォーカスを得て値の修正が完了したタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").change(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

3.click

説明	クリックされた時
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").click(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

4.dblclick

説明	ダブルクリックされた時
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").dblclick(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

5.error

説明	JavaScriptのエラーが発生したタイミングで発生
サンプルソース	$(function() { // ↓「error()」でわざとエラーを発生させています。 $("input[type=button]").click(function(){ $("input").error(); }); // ↓要素に対して捕捉するイベントを指定 $("input").error(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

本日は
　blur、change、click、dblclick、error
の5本を学びました。
changeイベントは入力を完了したタイミングで、
入力内容の妥当性を検証するときなどで使えそうですね。

それでは、また。