JavaScriptでの要素へのハンドラーのバインド

さて、私たちのDOM要素に、ウェブサイトユーザーのアクションに対して反応する方法を学びましょう。例えば、ユーザーがどこかをマウスでクリックし、私たちのコードがそのクリックを処理して、何らかの情報を画面に表示する必要があるとします。

JavaScriptを通じて追跡できるユーザーのアクションは、イベントと呼ばれます。イベントには次のようなものがあります：ページ要素のマウスクリック、ページ要素へのマウスオーバー、またはその逆—要素からのマウスカーソルの離脱など。さらに、ユーザーのアクションに依存しないイベントもあります。例えば、HTMLページがブラウザにロードされたときのイベントなどです。

例として、クリックすると何らかのテキストが画面に表示されるボタンを作ってみましょう。まず、ボタンのHTMLコードを作成します：

<input id="button" type="submit">

次に、ボタンへの参照を変数に取得します：

let button = document.querySelector('#button');

次に、ボタンがクリックされたときの反応を設定する必要があります。このために、JavaScriptには特別なメソッド addEventListener があります。このメソッドは第一引数にイベント名（ボタンクリックのイベント名は 'click'）、第二引数にコールバック関数を受け取ります。この関数はイベントが発生したときに実行されます。

例えば、ボタンクリック時に何らかのテキストを出力してみましょう：

button.addEventListener('click', function() {
	console.log('!!!');
});

3つのボタンがあります：

<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">

最初のボタンをクリックすると数字 1 が表示され、2番目のボタンをクリックすると数字 2 が表示され、3番目のボタンをクリックすると数字 3 が表示されるようにしてください。