off( events, selector, fn )

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

記述方法

jQuery( セレクター1 ) . off( イベントタイプ, セレクター2, イベントハンドラ );

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

引数

events / イベントタイプ

「click」や「mouseover」などのイベントタイプを文字列で指定。

selector / セレクター2

イベントハンドラを取り除きたい要素を指定する。

fn / イベントハンドラ

取り除きたいイベントハンドラを指定。

実装例(サンプル)





  1. このリストに追加

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

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

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

JavaScript

<script>
<!--
jQuery( function() {
    var count = 1;
    function sampleEventHandler() {
        jQuery( "#sample-ol" ).append( "<li>追加項目" + count++ + "。</li>" );
    }
    jQuery( "#sample-bind" ).on( "click", function() {
        jQuery( "#sample" ).on( "click mouseover mouseout", "#sample-button", sampleEventHandler );
    } ).click();
    jQuery( "#sample" ).on( "click", "#sample-unbind-click", function() {
        jQuery( "#sample" ).off( "click", "#sample-button", sampleEventHandler );
    } );
    jQuery( "#sample" ).on( "click", "#sample-unbind-mouseover", function() {
        jQuery( "#sample" ).off( "mouseover", "#sample-button", sampleEventHandler );
    } );
    jQuery( "#sample" ).on( "click", "#sample-unbind-mouseout", function() {
        jQuery( "#sample" ).off( "mouseout", "#sample-button", sampleEventHandler );
    } );
    jQuery( "#sample" ).on( "click", "#sample-unbind-mouseover-mouseout", function() {
        jQuery( "#sample" ).off( "mouseover mouseout", "#sample-button", sampleEventHandler );
    } );
} );
// -->
</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, イベント, イベントハンドラ・アタッチメント タグ: パーマリンク