JavaScriptでのループ内イベントハンドラの解除

ここで、要素が1つではなく複数ある場合を考えてみましょう。 例えば、いくつかの段落があります：

html<p>text1</p>
<p>text2</p>
<p>text3</p>

これらの各段落にクリックイベントハンドラとして 関数funcをバインドしましょう：

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', func);
}

function func() {
  console.log(this.textContent);
}

では、各段落が最初のクリックにのみ反応するようにコードを変更してみましょう。 そのために、段落がクリックされたときに、 バインドされたハンドラをその段落から解除します。 この解除はこの特定の段落に対してのみ行われ、 他の段落には影響しません。

ご存知の通り、イベントが発生した要素は、 ハンドラ関数内でthisを通じて取得できます。 これは、thisからハンドラを解除する必要があることを意味します。 次のようにします：

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', func);
}

function func() {
  console.log(this.textContent);
  this.removeEventListener('click', func); // ハンドラを解除
}