既に多くの方がご存知のことかと思いますが、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><script>
$(function() {
$('#click').on('click', function() {
$(this).css('background-color', '#00ff00');
});
});
</script>
ただ、この.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について学習したことを記述していきたいと思います。
投稿
