JavaScript ・ イベント
addEventListener()
クリックなどの操作に反応する
クリックや入力などの「イベント」が起きたときに実行する関数を登録します。ボタンやフォームを動かすための基本のメソッドです。
01
サンプルコード
HTML
1<button type="button" id="like">♡ いいね</button>
2<span id="count">0</span>
CSS
1button {
2 padding: 6px 16px;
3 border: 1px solid #b68235;
4 border-radius: 4px;
5 background: #fff;
6 color: #7d5411;
7 font: inherit;
8 cursor: pointer;
9}
JS
1const btn = document.querySelector('#like');
2const count = document.querySelector('#count');
3let n = 0;
4
5btn.addEventListener('click', () => {
6 n++;
7 count.textContent = n;
8 console.log('click', n);
9});
02
実行結果
ブラウザでの表示ボタンを押すと数が増えます
コンソール
- console.log() の出力がここに表示されます
03
解説
要素.addEventListener('イベント名', 関数) で、そのイベントが起きたときに関数が呼ばれるようになります。上の例では、ボタンがクリックされるたびに数を増やしています。
関数は引数でイベントの情報（イベントオブジェクト）を受け取れます。押された要素は event.target、押されたキーは event.key で分かります。
同じ要素に何個でも関数を登録できます。登録を解除するには removeEventListener() を使います。
04
応用例・注意点
よく使うイベント
| イベント名 | 説明 |
|---|---|
click | クリック（タップ）したとき |
input | 入力欄の値が変わるたび |
change | 選択や入力が確定したとき |
submit | フォームを送信するとき |
keydown | キーを押したとき |
DOMContentLoaded | HTMLの読み込みが終わったとき |
1回だけ反応させる
オプションの once: true を指定すると、1回実行したあと自動で解除されます。
HTML
1<button type="button" id="once">1回だけ</button>
JS
1document.querySelector('#once').addEventListener('click', () => {
2 console.log('1回目だけ表示されます');
3}, { once: true });
注意点
- 01HTMLの onclick 属性に書くより、addEventListener を使うほうが複数の処理を管理しやすくなります。
- 02addEventListener('click', fn()) のように ( ) を付けると、登録した瞬間に実行されてしまいます。関数そのもの（fn）を渡します。