クリックや入力をイベントとして受け取ろう

イベントは、クリック、キーボード入力、フォーム送信など、ブラウザ上で起きた出来事です。JavaScriptはイベントを受け取って処理を実行できます。

今回使用するファイル構成

javascript-practice/
├── index.html
├── css/
│   └── style.css
└── js/
    └── script.js

クリックイベントを受け取る

<button id="toggle-button" type="button">表示を切り替える</button>
<p id="message">クリック前です</p>

const button = document.querySelector('#toggle-button');
const message = document.querySelector('#message');

button.addEventListener('click', () => {
  message.textContent = 'ボタンがクリックされました';
});

addEventListener()の第1引数にイベント名、第2引数に実行する関数を渡します。

入力内容を画面へ反映する

<label for="name">名前</label>
<input id="name" type="text">
<p>入力内容：<span id="preview"></span></p>

const input = document.querySelector('#name');
const preview = document.querySelector('#preview');

input.addEventListener('input', (event) => {
  preview.textContent = event.currentTarget.value;
});

イベントを受け取る関数にはイベントオブジェクトが渡されます。currentTargetはイベントを登録した要素、valueは入力欄の現在値です。

フォーム送信を扱う

<form id="contact-form">
  <label for="email">メールアドレス</label>
  <input id="email" type="email" required>
  <button type="submit">確認する</button>
</form>
<p id="result"></p>

const form = document.querySelector('#contact-form');
const email = document.querySelector('#email');
const result = document.querySelector('#result');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  result.textContent = `${email.value}を確認しました`;
});

preventDefault()は、この練習でフォーム本来の送信を止めるために使います。実際のフォームでは、送信先、入力検証、CSRF対策なども必要です。

まとめ

addEventListener()を使うと、利用者の操作を受け取れます。クリック、入力、送信の違いと、イベントオブジェクトから対象の値を取得する方法を確認しましょう。

次の記事では、これまでのDOM操作とイベントを組み合わせてUIを作ります。