名前空間を使いイベントハンドラをバインドまたは削除

イベントハンドラをバインドしたり取り除いたりするには、名前空間を使うと便利だ。

記述方法

jQuery( セレクター ) . on( "イベントタイプ.名前空間", イベントハンドラ );
jQuery( セレクター ) . off( ".名前空間" );

実装例(サンプル)





  1. このリストに追加

実装例(サンプル)の動作について

  • 「項目追加」ボタンのクリックイベント、マウスオーバーイベント、マウスアウトイベントが発生すると、ボタンの下のリストに項目を追加する。
  • 「イベントハンドラを追加」ボタンをクリックする度に、項目を追加するイベントハンドラを「項目追加」ボタンのクリックイベント、マウスオーバーイベント、マウスアウトイベントに追加する。
  • 「クリックイベントのイベントハンドラを取り除く」ボタンをクリックすると、「項目追加」ボタンのクリックイベントのイベントハンドラを取り除く。
  • 「マウスオーバーイベントのイベントハンドラを取り除く」ボタンをクリックすると、「項目追加」ボタンのマウスオーバーイベントのイベントハンドラを取り除く。
  • 「マウスアウトイベントのイベントハンドラを取り除く」ボタンをクリックすると、「項目追加」ボタンのマウスアウトイベントのイベントハンドラを取り除く。
  • 「マウスオーバーイベントとマウスアウトイベントのイベントハンドラを取り除く」ボタンをクリックすると、「項目追加」ボタンのマウスオーバーイベントとマウスアウトイベントのイベントハンドラを取り除く。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    var count = 1;
    function clickEventHandler() {
        jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。クリックイベントで追加。</li>" );
    }
    function mouseoverEventHandler() {
        jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。マウスオーバーイベントで追加。</li>" );
    }
    function mouseoutEventHandler() {
        jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。マウスアウトイベントで追加。</li>" );
    }
    jQuery( "#sample-bind" ).on( "click", function() {
        jQuery( "#sample-button" ).on(
            {
                "click.clickEventHandler": clickEventHandler,
                "mouseover.mouseoverEventHandler": mouseoverEventHandler,
                "mouseout.mouseoutEventHandler": mouseoutEventHandler
            }
        );
    } ).click();
    jQuery( "#sample-unbind-click" ).on( "click", function() {
        jQuery( "#sample-button" ).off( ".clickEventHandler" );
    } );
    jQuery( "#sample-unbind-mouseover" ).on( "click", function() {
        jQuery( "#sample-button" ).off( ".mouseoverEventHandler" );
    } );
    jQuery( "#sample-unbind-mouseout" ).on( "click", function() {
        jQuery( "#sample-button" ).off( ".mouseoutEventHandler" );
    } );
    jQuery( "#sample-unbind-mouseover-mouseout" ).on( "click", function() {
        jQuery( "#sample-button" ).off( ".mouseoverEventHandler .mouseoutEventHandler" );
    } );
} );
// -->
</script>

使用している主なjQuery api

HTML

<button id="sample-button">項目追加</button><br />
<button id="sample-bind">「項目追加」ボタンにイベントハンドラを追加</button><br />
<button id="sample-unbind-click">「項目追加」ボタンのクリックイベントのイベントハンドラを取り除く</button><br />
<button id="sample-unbind-mouseover">「項目追加」ボタンのマウスオーバーイベントのイベントハンドラを取り除く</button><br />
<button id="sample-unbind-mouseout">「項目追加」ボタンのマウスアウトイベントのイベントハンドラを取り除く</button>
<button id="sample-unbind-mouseover-mouseout">「項目追加」ボタンのマウスオーバーイベントとマウスアウトイベントのイベントハンドラを取り除く</button>
<ol id="sample-ol">
    <li>このリストに追加</li>
</ol>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, イベント, 逆引き パーマリンク