先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptでボタンを押したり、フォームを変更したときに反応する処理を作りたいです。でも何から始めればいいのかわかりません。」

先生

「それならまずonclickやonchangeのような基本イベントを理解しましょう。これらはユーザーの操作に応じて処理を実行する方法です。」

生徒

「具体的にはどんな操作に対応しているんですか？」

先生

「onclickはボタンやリンクをクリックしたとき、onchangeは入力欄やセレクトボックスの値が変更されたときに使います。」

1. onclickイベントとは？

onclickはユーザーがボタンやリンクなどをクリックしたときに処理を実行するためのイベントです。HTMLに直接書く方法と、JavaScriptで設定する方法があります。

HTMLに直接書く場合は次のようにします。


<button onclick="alert('ボタンがクリックされました！')">クリック</button>

このコードではボタンをクリックすると、アラートが表示されます。簡単ですが、複雑な処理にはJavaScript側で設定する方法がおすすめです。

2. onchangeイベントとは？

onchangeは、入力フォームやセレクトボックスの値が変更されたときに発生するイベントです。値が変わったタイミングで処理を行えます。


<input type="text" id="myInput" onchange="alert('入力が変更されました')">

文字を入力してEnterキーやフォーカスが外れたタイミングでアラートが表示されます。

3. JavaScriptでイベントを設定する方法

HTMLに直接書く代わりに、JavaScriptでイベントを設定するとコードの管理がしやすくなります。例えばonclickの場合です。


const button = document.getElementById("myButton");

button.onclick = function() {
  alert("ボタンがクリックされました！");
};

この方法では、HTMLに処理を書かずにJavaScript側でイベントを設定できます。onchangeも同じように設定可能です。

4. onclickとonchangeの使い分け

基本的に、ユーザーの操作に応じて使い分けます。

onclick：ボタンやリンクをクリックしたときに実行
onchange：入力値や選択値が変更されたときに実行

例えば、送信ボタンはonclick、テキスト入力やセレクトボックスはonchangeと覚えておくとわかりやすいです。

5. 実践例：フォームとボタンのイベント

ボタンをクリックしてメッセージを表示し、テキスト入力の変更で文字数を表示する例です。


<button id="myButton">クリック</button>
<input type="text" id="myInput">
<span id="charCount">文字数: 0</span>


const button = document.getElementById("myButton");
const input = document.getElementById("myInput");
const count = document.getElementById("charCount");

button.onclick = function() {
  alert("ボタンがクリックされました！");
};

input.onchange = function() {
  count.textContent = "文字数: " + input.value.length;
};

これでボタンを押したときと入力値が変更されたとき、それぞれ別々に処理を実行できます。初心者の方はまずこのような簡単な例から試すのがおすすめです。