イベントを解除する方法 #JavaScript

登録したイベントを解除する方法のメモ

<p>
    <button id="eventButton">イベントボタン</button>
</p>

一度押したら解除する場合、addEventListenerの第3引数でonceをtrueにします。

const event = document.querySelector('#eventButton')
event.addEventListener('click', logOutput, { 'once': true })

function logOutput() {
  console.count("^_^")
}

何か条件を指定し、解除する場合はremoveEventListenerに登録(add)した関数を指定します。下記のコードは4回絵文字が出力されるとボタンイベントが停止します。

const event = document.querySelector('#eventButton')
event.addEventListener('click', logOutput)
let i = 0;

function logOutput() {
  i++
  if (i === 4) {
    event.removeEventListener('click', logOutput)
  }
  console.count("^_^")
}

こちらのサイトのように同じボタンを2回押させたく無いときに使用します。

イベントを解除する方法

参考