JQueryの.onメソッドについて

こんにちは、Taroです。
既に多くの方がご存知のことかと思いますが、JQuery 1.7以降、イベント定義では.onメソッドを使用することが主流なようです。
恥ずかしながら、私は昨日まで、下記のように書いておりました。
そのため、本日はこの.onメソッドについて調べてみたいと思います。
使用するJQueryのバージョンは1.12.4になります。

<div id="click" style="background-color: #cc0000; width: 50px; height: 50px;"></div>
<script>
  $(function() {
    $('#click').click(function() {
      $(this).css('background-color', '#00ff00');
    });
  });
</script>

それではこちらを.onメソッドで書き換えるとどうなるのでしょうか？

<script>
  $(function() {
    $('#click').on('click', function() {
      $(this).css('background-color', '#00ff00');
    });
  });
</script>

あまり変わらなく、逆にclickの方が直感的かも。。。
ただ、この.onメソッドの偉いところは、複数のイベントに対して定義ができることです。

$(function() {
  var change_color_flg = true;
  $('#click').on('click mouseenter', function() {
    if (change_color_flg) {
      $(this).css('background-color', '#00ff00');
      change_color_flg = false;
    } else {
      $(this).css('background-color', '#0000ff');
      change_color_flg = true;
    }
  });
});

これで、クリックしたときとマウスオーバーしたとき両方で色を変えることができます。 また、各イベントに対してハンドラを定義することもできます。 その際は、マップ（連想配列）で渡すようです。

$('#click').on({
  // クリックしたとき
  'click': function() {
    $(this).css('background-color', '#ff7fbf');
  },
  // マウスオーバーしたとき
  'mouseenter': function() {
      $(this).css('background-color', '#7fffff');
  },
  // マウスアウトしたとき
  'mouseleave': function() {
    $(this).css('background-color', '#bfff7f');
  }
});

これは見やすくなりました。
他にも便利な使い方がないかと、JQueryの日本語ドキュメントをながめてみました。
http://js.studio-kingdom.com/jquery/events/on

実は.onメソッドには4つの引数を与えられるようです。

• 第一引数：イベント
• 第二引数：セレクタ
• 第三引数：ハンドラに渡したいdata
• 第四引数：ハンドラ

第二引数と第三引数は省略可能です。
そのため、上述したように、イベントとハンドラだけでも動きます。
ただ、折角なので、使用してみたいと思います。

あとから追加した要素にイベントを定義する

---

親要素（#click）を起点として、子要素を監視させます。（以前はdelegete()で管理していたやつです。）
普通は後から追加した要素にイベントハンドラは実行されません。

<div id="click">
  <button>初めからある</button>
</div>
<script>
$('#click').on('click', 'button', function() {
  $(this).after("<button>新しいボタンです</button>");
});
</script>

イベントハンドラにデータを渡す

---

$('#click').on('click', {value: 'Hello'}, function(event) {
  alert(event.data.value);
});

おわりに

---

非常に簡単ではありますが、JQueryの.onメソッドについてまとめてみました。
今後もJavaScriptやJQueryについて学習したことを記述していきたいと思います。