jQuery API の on( events ) は、「events」にオブジェクトで指定したイベントハンドラを、マッチした要素にバインドするメソッド。
イベントとイベントハンドラは、「events」にオブジェクト形式で複数指定できる。
記述方法
jQuery( セレクター ) . on( イベントオブジェクト );
「イベントオブジェクト」に指定したイベンドハンドラを、「セレクター」の要素にバインド。
引数
- events / イベントオブジェクト
JavaScriptにおけるユーザー定義オブジェクトで指定。
記述例１
jQuery( セレクター ) . on(
{
click: function() {
// クリックイベント時の処理
},
mouseover: function() {
// マウスオーバーイベント時の処理
},
mouseout: function() {
// マウスアウトイベント時の処理
}
}
);
{
click: function() {
// クリックイベント時の処理
},
mouseover: function() {
// マウスオーバーイベント時の処理
},
mouseout: function() {
// マウスアウトイベント時の処理
}
}
);
記述例２
オブジェクト変数 = new Object();
オブジェクト変数 . click = function() {
// クリックイベント時の処理
}
オブジェクト変数 . mouseover = function() {
// マウスオーバーイベント時の処理
}
オブジェクト変数 . mouseout = function() {
// マウスアウトイベント時の処理
}
jQuery( セレクター ) . on( オブジェクト変数 );
オブジェクト変数 . click = function() {
// クリックイベント時の処理
}
オブジェクト変数 . mouseover = function() {
// マウスオーバーイベント時の処理
}
オブジェクト変数 . mouseout = function() {
// マウスアウトイベント時の処理
}
jQuery( セレクター ) . on( オブジェクト変数 );
実装例（サンプル）１
- このリストに追加
実装例（サンプル）１の動作について
「項目追加」ボタンのクリックイベント、マウスオーバーイベント、マウスアウトイベントが発生すると、ボタンの下のリストに項目を追加する。
実装例（サンプル）１のソースコード
JavaScript
<script>
<!--
jQuery( function() {
var count = 1;
jQuery( "#sample-button" ).on(
{
click: function() {
jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。クリックで追加。</li>" );
},
mouseover: function() {
jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。マウスオーバーで追加。</li>" );
},
mouseout: function() {
jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。マウスアウトで追加。</li>" );
}
}
);
} );
// -->
</script>
<!--
jQuery( function() {
var count = 1;
jQuery( "#sample-button" ).on(
{
click: function() {
jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。クリックで追加。</li>" );
},
mouseover: function() {
jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。マウスオーバーで追加。</li>" );
},
mouseout: function() {
jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。マウスアウトで追加。</li>" );
}
}
);
} );
// -->
</script>
HTML
<button id="sample-button">項目追加</button>
<ol id="sample-ol">
<li>このリストに追加</li>
</ol>
<ol id="sample-ol">
<li>このリストに追加</li>
</ol>
実装例（サンプル）２
- このリストに追加
実装例（サンプル）２の動作について
「項目追加」ボタンのクリックイベント、マウスオーバーイベント、マウスアウトイベントが発生すると、ボタンの下のリストに項目を追加する。
実装例（サンプル）２のソースコード
JavaScript
<script>
<!--
jQuery( function() {
var count = 1;
eventObject = new Object();
eventObject.click = function() {
jQuery( "#sample2-ol" ).append( "<li>追加項目" + count++ + "。クリックで追加。</li>" );
}
eventObject.mouseover = function() {
jQuery( "#sample2-ol" ).append( "<li>追加項目" + count++ + "。マウスオーバーで追加。</li>" );
}
eventObject.mouseout = function() {
jQuery( "#sample2-ol" ).append( "<li>追加項目" + count++ + "。マウスアウトで追加。</li>" );
}
jQuery( "#sample2-button" ) . on( eventObject );
} );
// -->
</script>
<!--
jQuery( function() {
var count = 1;
eventObject = new Object();
eventObject.click = function() {
jQuery( "#sample2-ol" ).append( "<li>追加項目" + count++ + "。クリックで追加。</li>" );
}
eventObject.mouseover = function() {
jQuery( "#sample2-ol" ).append( "<li>追加項目" + count++ + "。マウスオーバーで追加。</li>" );
}
eventObject.mouseout = function() {
jQuery( "#sample2-ol" ).append( "<li>追加項目" + count++ + "。マウスアウトで追加。</li>" );
}
jQuery( "#sample2-button" ) . on( eventObject );
} );
// -->
</script>
HTML
<button id="sample2-button">項目追加</button>
<ol id="sample2-ol">
<li>このリストに追加</li>
</ol>
<ol id="sample2-ol">
<li>このリストに追加</li>
</ol>