on( events, data )

投稿日: 2013年11月22日 作成者: alphasis

jQuery API の on( events, data ) は、「events」にオブジェクトで指定したイベントハンドラを、マッチした要素にバインドするメソッド。その際、イベントハンドラにイベントデータ「data」を渡すことができる。

イベントとイベントハンドラは「events」に、イベントデータは「data」にオブジェクト形式で複数指定できる。

記述方法

jQuery( セレクター ) . on( イベントオブジェクト, イベントデータ );

「イベントオブジェクト」に指定したイベンドハンドラを、「セレクター」の要素にバインド。その際、イベントハンドラに「イベントデータ」を渡す。

引数

events / イベントオブジェクト

JavaScriptにおけるユーザー定義オブジェクトで指定。

data / イベントデータ

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

イベントデータは、event.dataプロパティに格納される。

記述例１

jQuery( セレクター ) . on(
    {
        click: function() {
            // クリックイベント時の処理
        },
        mouseover: function() {
            // マウスオーバーイベント時の処理
        },
        mouseout: function() {
            // マウスアウトイベント時の処理
        }
    },
    {
        イベントデータ名１: イベントデータ１,
        イベントデータ名２: イベントデータ２
    }
);

記述例２

オブジェクト変数 = new Object();
オブジェクト変数 . click = function() {
    // クリックイベント時の処理
}
オブジェクト変数 . mouseover = function() {
    // マウスオーバーイベント時の処理
}
オブジェクト変数 . mouseout = function() {
    // マウスアウトイベント時の処理
}
jQuery( セレクター ) . on( オブジェクト変数, { イベントデータ名１: イベントデータ１, イベントデータ名２: イベントデータ２ } );

実装例（サンプル）１

  1. このリストに追加

実装例（サンプル）１の動作について

「項目追加」ボタンのクリックイベント、マウスオーバーイベント、マウスアウトイベントが発生すると、ボタンの下のリストに項目を追加する。

実装例（サンプル）１のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    var count = 1;
    jQuery( "#sample-button" ).on(
        {
            click: function( event ) {
                jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。" + event.data.data1 + "。" + event.data.data2 + "。クリックで追加。</li>" );
            },
            mouseover: function( event ) {
                jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。" + event.data.data1 + "。" + event.data.data2 + "。マウスオーバーで追加。</li>" );
            },
            mouseout: function( event ) {
                jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。" + event.data.data1 + "。" + event.data.data2 + "。マウスアウトで追加。</li>" );
            }
        },
        {
            data1 : "データ１",
            data2 : "データ２"
        }
    );
} );
// -->
</script>

HTML

<button id="sample-button">項目追加</button>
<ol id="sample-ol">
    <li>このリストに追加</li>
</ol>

実装例（サンプル）２

  1. このリストに追加

実装例（サンプル）２の動作について

「項目追加」ボタンのクリックイベント、マウスオーバーイベント、マウスアウトイベントが発生すると、ボタンの下のリストに項目を追加する。

実装例（サンプル）２のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    var count = 1;
    eventObject = new Object();
    eventObject.click = function( event ) {
        jQuery( "#sample2-ol" ).append( "<li>追加項目" + count++ + "。" + event.data.data1 + "。" + event.data.data2 + "。クリックで追加。</li>" );
    }
    eventObject.mouseover = function( event ) {
        jQuery( "#sample2-ol" ).append( "<li>追加項目" + count++ + "。" + event.data.data1 + "。" + event.data.data2 + "。マウスオーバーで追加。</li>" );
    }
    eventObject.mouseout = function( event ) {
        jQuery( "#sample2-ol" ).append( "<li>追加項目" + count++ + "。" + event.data.data1 + "。" + event.data.data2 + "。マウスアウトで追加。</li>" );
    }
    var eventData = {
        data1 : "データ１",
        data2 : "データ２"
    }
    jQuery( "#sample2-button" ) . on( eventObject, eventData );
} );
// -->
</script>

HTML

<button id="sample2-button">項目追加</button>
<ol id="sample2-ol">
    <li>このリストに追加</li>
</ol>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, イベント, イベントハンドラ・アタッチメント タグ: パーマリンク