JavaScriptでのループ内でのイベントハンドラ追加

それでは、要素に大量にイベントハンドラを追加する方法を学びましょう。例えば、次のような段落があるとします：

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

また、次のような関数があるとします：

javascriptfunction func() {
  console.log('!');
}

では、ループで段落を順に処理し、各段落にクリックイベントのハンドラとして関数 func を追加しましょう：

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

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

さらに進んで、どの段落をクリックしてもその段落のテキストが表示されるようにしましょう。しかし問題があります：段落は複数あるのに、ハンドラ関数は1つしかありません。ハンドラ関数内で段落をどうやって区別すればいいでしょうか？

これを解決するには this オブジェクトが役立ちます。イベント発生時に関数が呼び出されると、このオブジェクトはイベントが発生した要素を指します。上記を踏まえて、関数 func のコードを書き直しましょう：

javascriptfunction func() {
  console.log(this.textContent); // 段落のテキストを表示
}

javascriptfunction func() {
  this.value = Number(this.value) + 1;
}