JavaScriptのonclick・onchangeなどの基本イベントを理解しよう

1. onclickイベントとは？

1. onclickイベントとは？

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

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

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

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

2. onchangeイベントとは？

2. onchangeイベントとは？

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

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

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

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

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

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

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

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

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

4. onclickとonchangeの使い分け

4. onclickとonchangeの使い分け

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

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

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

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

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;
};

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

6. イベント設定のポイント

6. イベント設定のポイント

初心者が覚えておきたいポイントは次の通りです。

• HTMLに直接書く方法は簡単だが、複雑な処理や管理には向かない
• JavaScriptで設定すると、複数の処理や動的な要素にも対応できる
• onclickとonchangeを正しく使い分ける

7. 練習のすすめ

7. 練習のすすめ

まずはボタンを作ってクリックでアラートを出す、入力欄を作って文字数を表示する、といった簡単な例から始めてみましょう。実際に手を動かすことで、イベント処理の基本が自然に身につきます。