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

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

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

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

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

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

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

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

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

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

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

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

段落が与えられています。いずれかの段落がクリックされると、その末尾に感嘆符を追加します。この追加が最初のクリックでのみ行われるようにしてください。