eventTarget.removeEventListener( eventType, eventListener[, useCapture] )は、イベントターゲット「eventTarget」のイベントタイプ「eventType」に登録済みのイベントリスナー「eventListener」を削除するメソッド。
構文
eventTarget.removeEventListener( eventType, eventListener[, useCapture] )
引数
- eventType
- イベントタイプを指定する。
- eventListener
- 削除したいイベントオブジェクトを指定する。
- useCapture
- イベントの流れ（イベントフロー）の方向を指定する。
- 「true」を指定すると、キャプチャフェーズ。DOMツリーの上から下へ向かう流れの段階。
- 「false」を指定すると、バブリングフェーズかターゲットフェーズ。バブリングフェーズは、DOMツリーの下から上へ向かう流れの段階。
- 省略可能。初期設定値は「false」。
戻り値
なし。
サンプル
0
サンプルの動作について
- 「カウントアップ」ボタンをクリックする度に、ボタンの右横の数値に１を加算する。
- 「イベントターゲットからイベントリスナーを削除」ボタンをクリックすると、「カウントアップ」ボタンをクリックしても加算しなくなる。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sampleButtonA" ).addEventListener( "click", $countUp, false );
document.getElementById( "sampleButtonB" ).addEventListener( "click", $removeEventListener, false );
}
var $count = 0;
var $countUp = function() {
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
var $removeEventListener = function() {
document.getElementById( "sampleButtonA" ).removeEventListener( "click", $countUp, false );
document.getElementById( "sampleOutput" ).innerHTML = "removeEventListener";
}
</script>
window.onload = function () {
document.getElementById( "sampleButtonA" ).addEventListener( "click", $countUp, false );
document.getElementById( "sampleButtonB" ).addEventListener( "click", $removeEventListener, false );
}
var $count = 0;
var $countUp = function() {
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
var $removeEventListener = function() {
document.getElementById( "sampleButtonA" ).removeEventListener( "click", $countUp, false );
document.getElementById( "sampleOutput" ).innerHTML = "removeEventListener";
}
</script>
HTML
<p>
<button id="sampleButtonA">カウントアップ</button>
<span id="sampleOutput" style="margin-left: 10px;">0</span>
<br />
<button id="sampleButtonB">イベントターゲットからイベントリスナーを削除</button>
</p>
<button id="sampleButtonA">カウントアップ</button>
<span id="sampleOutput" style="margin-left: 10px;">0</span>
<br />
<button id="sampleButtonB">イベントターゲットからイベントリスナーを削除</button>
</p>