off( eventObject, selector )

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

jQuery API の off( eventObject, selector ) は、「eventObject」に指定したイベントハンドラを、マッチした要素の子孫要素のうち「selector」にマッチした要素から取り除くメソッド。

記述方法

jQuery( セレクター１ ) . off( イベントオブジェクト, セレクター２ );

「セレクター１」の子孫要素のうち「セレクター２」にマッチした要素から、「イベントオブジェクト」に指定したイベントハンドラを取り除く。

「セレクター１」「セレクター２」を使い、on( events, selector )メソッドなどでバインドしたイベントハンドラが、取り除く対象である点に注意。

引数

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

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

記述例

function clickEventHandler() {
    // クリックイベント時のイベントハンドラ
}
function mouseoverEventHandler() {
    // マウスオーバーイベント時のイベントハンドラ
}
function mouseoutEventHandler() {
    // マウスアウトイベント時のイベントハンドラ
}
jQuery( セレクター１ ) . on(
    {
        click: clickEventHandler, // クリックイベント時のイベントハンドラ「clickEventHandler」をバインド。
        mouseover: mouseoverEventHandler, // マウスオーバーイベント時のイベントハンドラ「mouseoverEventHandler」をバインド。
        mouseout: mouseoutEventHandler // マウスアウトイベント時のイベントハンドラ「mouseoutEventHandler」をバインド。
    },
    セレクター２
);
jQuery( セレクター１ ) . off(
    {
        click: clickEventHandler, // クリックイベント時のイベントハンドラ「clickEventHandler」を取り除く。
        mouseover: mouseoverEventHandler, // マウスオーバーイベント時のイベントハンドラ「mouseoverEventHandler」を取り除く。
        mouseout: mouseoutEventHandler // マウスアウトイベント時のイベントハンドラ「mouseoutEventHandler」を取り除く。
    },
    セレクター２
);

実装例（サンプル）





  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" ).on(
            {
                click: clickEventHandler,
                mouseover: mouseoverEventHandler,
                mouseout: mouseoutEventHandler
            },
            "#sample-button"
        );
    } ).click();
    jQuery( "#sample-unbind-click" ).on( "click", function() {
        jQuery( "#sample" ).off(
            {
                click: clickEventHandler
            },
            "#sample-button"
        );
    } );
    jQuery( "#sample-unbind-mouseover" ).on( "click", function() {
        jQuery( "#sample" ).off(
            {
                mouseover: mouseoverEventHandler
            },
            "#sample-button"
        );
    } );
    jQuery( "#sample-unbind-mouseout" ).on( "click", function() {
        jQuery( "#sample" ).off(
            {
                mouseout: mouseoutEventHandler
            },
            "#sample-button"
        );
    } );
    jQuery( "#sample-unbind-mouseover-mouseout" ).on( "click", function() {
        jQuery( "#sample" ).off(
            {
                mouseover: mouseoverEventHandler,
                mouseout: mouseoutEventHandler
            },
            "#sample-button"
        );
    } );
} );
// -->
</script>

HTML

<div id="sample">
    <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>
</div>

スポンサード リンク

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