jQuery API の off( eventObject ) は、「eventObject」に指定したイベントハンドラを、マッチした要素から取り除くメソッド。
記述方法
jQuery( セレクター ) . off( イベントオブジェクト );
「セレクター」にマッチした要素から、「イベントオブジェクト」に指定したイベントハンドラを取り除く。
引数
- eventObject / イベントオブジェクト
JavaScriptにおけるユーザー定義オブジェクトで指定。
記述例
function clickEventHandler() {
// クリックイベント時のイベントハンドラ
}
function mouseoverEventHandler() {
// マウスオーバーイベント時のイベントハンドラ
}
function mouseoutEventHandler() {
// マウスアウトイベント時のイベントハンドラ
}
jQuery( セレクター ) . off(
{
click: clickEventHandler, // クリックイベント時のイベントハンドラ「clickEventHandler」を取り除く。
mouseover: mouseoverEventHandler, // マウスオーバーイベント時のイベントハンドラ「mouseoverEventHandler」を取り除く。
mouseout: mouseoutEventHandler // マウスアウトイベント時のイベントハンドラ「mouseoutEventHandler」を取り除く。
}
);
// クリックイベント時のイベントハンドラ
}
function mouseoverEventHandler() {
// マウスオーバーイベント時のイベントハンドラ
}
function mouseoutEventHandler() {
// マウスアウトイベント時のイベントハンドラ
}
jQuery( セレクター ) . off(
{
click: clickEventHandler, // クリックイベント時のイベントハンドラ「clickEventHandler」を取り除く。
mouseover: mouseoverEventHandler, // マウスオーバーイベント時のイベントハンドラ「mouseoverEventHandler」を取り除く。
mouseout: mouseoutEventHandler // マウスアウトイベント時のイベントハンドラ「mouseoutEventHandler」を取り除く。
}
);
実装例（サンプル）
- このリストに追加
実装例（サンプル）の動作について
- 「項目追加」ボタンのクリックイベント、マウスオーバーイベント、マウスアウトイベントが発生すると、ボタンの下のリストに項目を追加する。
- 「イベントハンドラを追加」ボタンをクリックする度に、項目を追加するイベントハンドラを「項目追加」ボタンのクリックイベント、マウスオーバーイベント、マウスアウトイベントに追加する。
- 「クリックイベントのイベントハンドラを取り除く」ボタンをクリックすると、「項目追加」ボタンのクリックイベントのイベントハンドラを取り除く。
- 「マウスオーバーイベントのイベントハンドラを取り除く」ボタンをクリックすると、「項目追加」ボタンのマウスオーバーイベントのイベントハンドラを取り除く。
- 「マウスアウトイベントのイベントハンドラを取り除く」ボタンをクリックすると、「項目追加」ボタンのマウスアウトイベントのイベントハンドラを取り除く。
- 「マウスオーバーイベントとマウスアウトイベントのイベントハンドラを取り除く」ボタンをクリックすると、「項目追加」ボタンのマウスオーバーイベントとマウスアウトイベントのイベントハンドラを取り除く。
実装例（サンプル）のソースコード
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,
mouseover: mouseoverEventHandler,
mouseout: mouseoutEventHandler
}
);
} ).click();
jQuery( "#sample-unbind-click" ).on( "click", function() {
jQuery( "#sample-button" ).off(
{
click: clickEventHandler
}
);
} );
jQuery( "#sample-unbind-mouseover" ).on( "click", function() {
jQuery( "#sample-button" ).off(
{
mouseover: mouseoverEventHandler
}
);
} );
jQuery( "#sample-unbind-mouseout" ).on( "click", function() {
jQuery( "#sample-button" ).off(
{
mouseout: mouseoutEventHandler
}
);
} );
jQuery( "#sample-unbind-mouseover-mouseout" ).on( "click", function() {
jQuery( "#sample-button" ).off(
{
mouseover: mouseoverEventHandler,
mouseout: mouseoutEventHandler
}
);
} );
} );
// -->
</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,
mouseover: mouseoverEventHandler,
mouseout: mouseoutEventHandler
}
);
} ).click();
jQuery( "#sample-unbind-click" ).on( "click", function() {
jQuery( "#sample-button" ).off(
{
click: clickEventHandler
}
);
} );
jQuery( "#sample-unbind-mouseover" ).on( "click", function() {
jQuery( "#sample-button" ).off(
{
mouseover: mouseoverEventHandler
}
);
} );
jQuery( "#sample-unbind-mouseout" ).on( "click", function() {
jQuery( "#sample-button" ).off(
{
mouseout: mouseoutEventHandler
}
);
} );
jQuery( "#sample-unbind-mouseover-mouseout" ).on( "click", function() {
jQuery( "#sample-button" ).off(
{
mouseover: mouseoverEventHandler,
mouseout: mouseoutEventHandler
}
);
} );
} );
// -->
</script>
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>
<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>