イベントハンドラの削除

addEventListener() メソッドを使用して以前に登録されたイベントハンドラを削除するには、次のように removeEventListener() メソッドを使用します。

element.removeEventListener(type, handler);Code language: CSS (css)

クラス .btn を持つボタンがあるとします。

<button class="btn">Register</button>Code language: HTML, XML (xml)

以下は、click イベントハンドラを定義しています。

function clickHandler(e) {
   console.log('Button Clicked');
}Code language: JavaScript (javascript)

以下は、ボタンのクリックイベントにイベントハンドラを追加します。

const btn = document.querySelector('.btn');
btn.addEventListener('click', clickHandler);Code language: JavaScript (javascript)

ボタンのクリックイベントからクリックイベントハンドラを削除するには、次のように removeEventListener() メソッドを使用します。

btn.removeEventListener('click', clickHandler);Code language: JavaScript (javascript)

イベントとイベントハンドラは同じでなければならないことに注意してください。匿名関数をイベントハンドラとして使用すると、削除できません。次のコードは機能しません。

const btn = document.querySelector('.btn');
// add an event listner
btn.addEventListener('click', function(e){
   console.log('Button Clicked');
});
// this code won't work and has no effect
btn.removeEventListener('click', function() {
   console.log('Button Clicked');
});Code language: JavaScript (javascript)

Chrome、Firefox、Edge を含む最新のほとんどの Web ブラウザは、removeEventListener() メソッドをサポートしています。

IE8 は removeEventListener() メソッドをサポートしていません。代わりに detachEvent() メソッドを使用します。

まだ IE8 をサポートする必要がある場合は、ブラウザ全体で動作する次のヘルパー関数を使用できます。

function removeEvent(el, type, handler) {
  if (el.detachEvent) {
    el.detachEvent('on' + type, handler);
  } else {
    el.removeEventListener(type, handler);
  }
}Code language: JavaScript (javascript)