JavaScriptのイベント「click」を使って動的に動作させる方法を完全解説！初心者向けガイド

新人と先輩の会話形式で理解しよう

新人

「JavaScriptでボタンを押したら動的にメッセージを表示するにはどうすればいいですか？」

先輩

「JavaScriptのイベントを使えば簡単に実現できます。特にclickイベントがよく使われますね。これから詳しく見ていきましょう！」

1. イベントとは？

イベントとは、ユーザーがページ内で何らかの操作（クリック、スクロール、キー入力など）を行ったときに発生する出来事のことです。JavaScriptでは、このイベントに応じて特定の処理を実行するようにプログラムできます。

たとえば、次のような操作がすべてイベントと呼ばれます：

ボタンをクリックする
マウスを動かす
テキストボックスに文字を入力する
フォームを送信する

これらのイベントに対して適切なイベントリスナーを設定することで、動的な動作を追加することができます。

2. イベントリスナーとは？

イベントリスナーは、特定のイベントが発生したときに呼び出される関数を登録する仕組みです。JavaScriptでは次のようにイベントリスナーを設定します：

対象の要素.addEventListener(イベント種類, イベント発生時に呼び出す関数名);

たとえば、ボタンがクリックされたときに特定の処理を実行するには、次のように記述します：

ボタンの要素.addEventListener("click", 関数);

このイベントリスナーがあるおかげで、ページ内の操作に応じてリアルタイムで動作を反映することが可能です。

3. clickイベントの基本の使い方

次に、ボタンを押したときにテキストを変更する例を見てみましょう。


<button id="myButton">クリックして変更</button>
<p id="message">ここが変更されます</p>
<p id="result"></p>

<script>
let button = document.querySelector("#myButton");

button.addEventListener("click", function() {
    let message = document.querySelector("#message");
    message.innerHTML = "メッセージが変更されました！";

    let result = document.querySelector("#result");
    result.innerHTML = "クリックイベントが正常に処理されました。";
});
</script>

ブラウザ表示

このプログラムでは、次の手順でclickイベントを処理しています：

ボタンがクリックされると、addEventListenerが呼び出されます。
クリックに反応して、関数内の処理が実行されます。
パラグラフの内容がinnerHTMLによって書き換えられます。
結果がリアルタイムで画面に反映されます。

このように、イベントを利用することで、ユーザーが行う操作に応じたインタラクティブなページを作ることができます。

4. 複数のイベントリスナーを設定する

複数のボタンにそれぞれ異なるイベントを設定することもできます。次の例では、2つのボタンに異なるclickイベントを設定し、それぞれ異なるメッセージが表示されるようにしています。


<button id="button1">ボタン1をクリック</button>
<button id="button2">ボタン2をクリック</button>
<p id="display"></p>

<script>
let button1 = document.querySelector("#button1");
let button2 = document.querySelector("#button2");
let display = document.querySelector("#display");

button1.addEventListener("click", function() {
    display.innerHTML = "ボタン1がクリックされました！";
});

button2.addEventListener("click", function() {
    display.innerHTML = "ボタン2がクリックされました！";
});
</script>

ブラウザ表示

この例では、ボタン1をクリックした場合とボタン2をクリックした場合で表示されるメッセージが変わります。複数のイベントリスナーを使うことで、複雑なユーザーインターフェースの構築も可能です。

5. 実際の活用例：フォームの入力内容を表示する

次の例では、フォームの送信ボタンをクリックすると、入力された名前が画面に表示されます。


<form>
    <input type="text" id="inputField" placeholder="名前を入力してください">
    <button type="button" onclick="displayInput()">送信</button>
</form>
<p id="output"></p>

<script>
function displayInput() {
    let inputField = document.querySelector("#inputField");
    let output = document.querySelector("#output");
    if (inputField.value === "") {
        output.innerHTML = "名前が入力されていません。";
    } else {
        output.innerHTML = "入力された名前: " + inputField.value;
    }
}
</script>

ブラウザ表示

この例では、ボタンのクリックイベントによって関数displayInput()が呼び出され、フォームに入力された名前が画面に表示されます。また、入力が空の場合には警告メッセージが表示される仕組みになっています。

6. clickイベントと他のイベントの組み合わせ

clickイベントは他のイベント（たとえば、mouseoverやkeydown）と組み合わせることで、さらに高度な動作を作ることができます。次の例では、ボタンにマウスカーソルを乗せると背景色が変わり、クリックするとメッセージが表示されます。


<button id="interactiveButton">インタラクティブなボタン</button>
<p id="finalMessage"></p>

<script>
let interactiveButton = document.querySelector("#interactiveButton");
let finalMessage = document.querySelector("#finalMessage");

interactiveButton.addEventListener("mouseover", function() {
    interactiveButton.style.backgroundColor = "lightblue";
});

interactiveButton.addEventListener("click", function() {
    finalMessage.innerHTML = "ボタンがクリックされました！";
});
</script>

ブラウザ表示

この例では、マウスをボタンに乗せると背景色が変わり、ボタンをクリックするとメッセージが表示される動作が実装されています。

7. onclick属性との違い

JavaScriptでクリックイベントを設定する方法には、addEventListenerの他に、HTMLのonclick属性を使う方法もあります。それぞれに特徴があります。

onclick属性：HTMLに直接書くため簡単だが、管理がしづらい
addEventListener：JavaScript側で管理でき、複数のイベントも設定可能


<button onclick="showMessage()">クリック</button>

<script>
function showMessage() {
    document.write("onclickで実行されました");
}
</script>

基本的には、コードの管理がしやすいaddEventListenerの使用が推奨されます。

8. イベントオブジェクトの活用方法

イベントが発生すると、「イベントオブジェクト」という情報が自動的に渡されます。このオブジェクトを使うことで、より細かい制御が可能になります。


<button id="eventBtn">クリック</button>

<script>
let eventBtn = document.querySelector("#eventBtn");

eventBtn.addEventListener("click", function(event) {
    document.write("クリックされた要素: " + event.target.tagName);
});
</script>

このように、どの要素がクリックされたかなどの情報を取得できるため、より高度な処理が可能になります。

9. イベントの削除（removeEventListener）

一度設定したイベントリスナーは、必要に応じて削除することもできます。これにより、不要な処理の実行を防ぐことができます。


<button id="btn">クリック</button>

<script>
let btn = document.querySelector("#btn");

function handleClick() {
    document.write("クリックされました<br>");
    btn.removeEventListener("click", handleClick);
}

btn.addEventListener("click", handleClick);
</script>

この例では、一度クリックされた後にイベントが削除されるため、2回目以降は処理が実行されません。