SYNCERのロゴ
アイキャッチ画像

EventTarget.removeEventListener() - イベントの削除

removeEventListener()は、EventTargetのメソッドです。ターゲットに設定してあるイベントを削除します。

概要

名前
removeEventListener
所属
EventTarget
IDL
void removeEventListener(DOMString type, EventListener? callback, optional (EventListenerOptions or boolean) options);

dictionary EventListenerOptions {
  boolean capture = false;
};

callback interface EventListener {
  void handleEvent(Event event);
};
仕様書
https://dom.spec.whatwg.org/#dom-eventtarget-removeeventlistener

説明

イベントを追加登録した時と同じ内容の引数を指定して下さい。

第1引数(type)には、削除対象のイベントの種類を文字列で指定します。

第2引数(callback)には、削除対象の関数を指定します。

第3引数(options)には、削除対象のイベントのオプションを指定します。

チュートリアル

イベントを削除する例です。引数は、登録した時と同じように指定して下さい。

<button id="hoge">SYNCER</button>
// 要素の取得
var element = document.getElementById( "hoge" ) ;

// リスナー (コールバック関数)
var callback = function ( event ) {
	console.log( "内容: ", event ) ;
}

// イベントの登録
element.addEventListener( "click", callback ) ;

// イベントの削除
element.removeEventListener( "click", callback ) ;

デモ

EventTarget.removeEventListener()のデモです。「削除」のボタンをクリックすると、「実行」のボタンに設定されているイベントが削除されます。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#result {
	white-space: pre-wrap ;
}
</style>
</head>
<body>
	<p><button id="hoge">実行</button></p>
	<p><button id="fuga">削除</button></p>
<hr>
<div id="result">0</div>
<script>
/** try it! **/
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;
var resultElement = document.getElementById( "result" ) ;

var callback = function ( event ) {
	console.log( event ) ;
	resultElement.textContent = Number( resultElement.textContent ) + 1 ;
} ;

element1.addEventListener( "click", callback ) ;

element2.onclick = function () {
	element1.removeEventListener( "click", callback ) ;
}
/** try it! **/
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月3日 (火)
コンテンツを公開しました。