JavaScriptのイベントとは？クリックや入力に反応する仕組みを解説
JavaScriptでWebページに動きをつけたいときに欠かせないのが「イベント処理」です。
ユーザーの操作（クリック、入力、スクロールなど）に反応して、指定した処理を実行することができます。
この記事では、JavaScriptにおけるイベントの基本的な仕組みや使い方を初心者向けにわかりやすく解説します。
イベントとは？
イベントとは、ユーザーの操作やブラウザの動作など、ある「出来事」を表します。
例えば次のようなものがあります：
- クリックされた（click）
- 文字が入力された（input）
- ページが読み込まれた（load）
- マウスが乗った（mouseover）
- キーが押された（keydown）
イベントリスナーの基本
イベントに反応して処理を実行するには、「イベントリスナー（監視する関数）」を登録します。
document.getElementById("btn").addEventListener("click", function() {
alert("ボタンがクリックされました！");
});
addEventListener メソッドを使うことで、特定の要素にイベントを設定できます。
HTMLの例
<button id="btn">クリックしてね</button>
このボタンがクリックされたときに、上記のJavaScriptが実行されます。
関数を分けて書く例
function showMessage() {
alert("クリックされました");
}
const button = document.getElementById("btn");
button.addEventListener("click", showMessage);
関数を別に定義しておけば、再利用しやすくなります。
イベントオブジェクトを使う
イベントが発生したときの情報は、イベントオブジェクトとして関数に渡されます。
document.addEventListener("keydown", function(event) {
console.log("押されたキー:", event.key);
});
この例では、押されたキーボードのキーをコンソールに表示しています。
よく使うイベントの種類
- click：クリックされたとき
- mouseover：マウスが上に乗ったとき
- mouseout：マウスが外れたとき
- submit：フォームが送信されたとき
- change：入力内容が変化したとき
- input：入力中に変化したとき
- keydown：キーが押されたとき
- load：ページ読み込み完了時
イベントの解除
removeEventListener を使えば、登録したイベントを解除することができます。
function handler() {
console.log("クリックされました");
}
button.addEventListener("click", handler);
button.removeEventListener("click", handler);
匿名関数は解除できないので、関数を変数にしておくのがポイントです。
まとめ
- イベントはユーザーの操作やブラウザの動作を表す
addEventListener を使って処理を設定する- イベントオブジェクトで詳細な情報を取得できる
removeEventListener で解除も可能
イベント処理は、ユーザーとWebページをつなぐ大事な機能です。
小さな動きから、実用的な機能まで、実際に試しながら理解を深めていきましょう。
