JavaScript入門 - イベント処理の基礎

イベント処理の基礎

イベントリスナー（addEventListener）を使って、ユーザーの操作に応じて処理を実行する方法を学びます。イベントオブジェクトの活用や、クリック・マウスオーバーイベントの使い方も体験しましょう。

タスク

クリックイベント

ボタンをクリックしたときにテキストを表示してみましょう。

マウスオーバーイベント

マウスをボタンに乗せたときにテキストや色を変えてみましょう。

イベントオブジェクト

eventオブジェクトを使ってイベントの種類をコンソールに出力してみましょう。

マウスアウトでリセット

マウスが離れたときに表示をリセットしてみましょう。

ヒント

addEventListenerでイベントを登録し、イベントオブジェクトを活用しましょう。

参考コード

// クリックイベントの登録
const clickBtn = document.getElementById("clickBtn");
const output = document.getElementById("output");

clickBtn.addEventListener("click", function(event) {
    output.textContent = "クリックされました！";
    output.style.color = "#2196f3";
    // eventオブジェクトも使える
    console.log(event.type);
});

// マウスオーバーイベントの登録
const hoverBtn = document.getElementById("hoverBtn");
hoverBtn.addEventListener("mouseover", function(event) {
    output.textContent = "マウスが乗りました！";
    output.style.color = "#e91e63";
    console.log(event.type);
});

// マウスアウトでリセット
hoverBtn.addEventListener("mouseout", function() {
    output.textContent = "";
    output.style.color = "#333";
});