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

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

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

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

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

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

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

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

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

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

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

次の関数が与えられています：

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

また、入力欄があります。どの入力欄でもフォーカスが外れた時に、上記の関数が実行されるようにしてください。

数字が書かれた段落があります。どの段落をクリックしても、その中の数字が2乗されるようにしてください。