IT初心者の分かったメモ

1. はじめに

前回の記事では、documentオブジェクトを使ってHTML要素を操作する方法を学びました。たとえばtextContentで文章を変えたり、appendChild()で要素を追加したりすることで、ページの見た目を自在に変えられることがわかりましたね。しかし、あの方法だけではページを開いた瞬間にしか反映されません。では、ユーザー側からの操作を受け付けたときに処理を実行するにはどうすればよいのでしょうか？その答えがイベントです。今回はイベント入門として、Webページを任意のタイミングで動かす基本を解説します。

2. イベントとは?

イベントとは、ユーザーの行動やブラウザの動きによって発生する合図のことです。
よくあるイベントの例：

• ボタンをクリックする
• 入力フォームに文字を入力する
• ページを読み込む
• 画像にマウスを乗せる

イベントと処理を組み合わせることで、なにかしらのきっかけからJavaScriptで書かれた動作を実行するという流れを作ることができます。つまり、前回で学んだdocument操作と組み合わせればいつ何をするかを自由に設定できるようになります。

3. 基本のイベント登録方法

イベントを登録するもっとも一般的な方法は、addEventListener()を使うやり方です。

<button id="clickTest">クリックしてね</button>

const clickTest = document.getElementById("clickTest");
clickTest.addEventListener("click", function() {
  alert("クリックされました！");
});

このように、addEventListener(“イベント発動のトリガー”, イベントの処理)と書くことで、イベントの処理を登録できます。

4. よく使うイベントとサンプル

4.1 クリックイベント（click）

前章の例でも出てきましたがクリックイベントは、最もよく使われるイベントのひとつです。

HTML

<p id="text">最初の文章です。</p>
<button id="changeBtn">文章を変える</button>

JavaScript

const text = document.getElementById("text");
const btn = document.getElementById("changeBtn");

btn.addEventListener("click", function() {
  text.textContent = "文章が変更されました！";
});

最初の文章です。

文章を変える

このように、ユーザーがボタンやリンクなどをクリックした瞬間に発生します。

4.2. 入力イベント（input）

入力イベントは、テキストボックスやテキストエリアに文字を入力したときに発生します。

HTML

<input type="text" id="inputBox" placeholder="入力してみてください">
<p id="output"></p>

JavaScript

const inputBox = document.getElementById("inputBox");
const output = document.getElementById("output");

inputBox.addEventListener("input", function() {
  output.textContent = inputBox.value;
});

入力するたびにイベントが起きるので、リアルタイムの処理に向いています。

4.3. マウスオーバーイベント（mouseover / mouseout）

マウスオーバーは、要素にマウスカーソルが乗った瞬間に発生します。また、カーソルが外れたときに発生するのがmouseoutです。

HTML

<img id="img" src="sample1.jpg" alt="画像" width="200">

JavaScript

const img = document.getElementById("img");

img.addEventListener("mouseover", function() {
  img.src = "sample2.jpg";
});
img.addEventListener("mouseout", function() {
  img.src = "sample1.jpg";
});

この組み合わせを使えば、ユーザー側がカーソルを置いたときと外したときの動きを簡単に表現できます。

5. イベントとdocument操作の組み合わせ

イベントは「きっかけ」、document操作は「実際の処理」です。 両方を組み合わせることで、ユーザーが操作するたびにページの見た目や内容を変化させることができます。例えばクリックで要素を追加や、削除ボタンで要素を消すといった処理は、イベントとdocument操作を組み合わせる典型的な例です。それらを応用することで

• 入力フォームからテキストを受け取り、追加ボタンでリストに新しい項目を作成
• 各項目に「削除」ボタンをつけて、不要になったら消せる

といった動きも、イベントとdocument操作を組み合わせることで実現できます。

6. まとめ

今回の記事では、JavaScriptのイベントについて学びました。イベントはユーザーの操作やブラウザの動きをきっかけにして処理を実行する仕組みです。

• クリックイベントでボタンを押したときの動きを作れる
• 入力イベントでフォームに入力した内容をリアルタイムに反映できる
• マウスオーバーイベントでカーソル操作に反応できる
• document操作と組み合わせることで、要素の追加・削除・変更が可能になる

前回の記事では、documentを使って要素を取得・変更する方法を解説しましたが、今回はそこにイベント（きっかけ）を組み合わせることで、ユーザーの操作に応じてページが動く仕組みが作れるようになりました。この2つを合わせると、単なる静的なページから動きのあるWebページに一歩近づけます。次のステップとしては、イベントを使ってCSSのスタイルを変えるなど、見た目の演出を加えていくと、さらに動的な表現ができるようになります。