イベントで動きをつけよう（後編）

前編では、イベントの概念と、addEventListenerを使ったイベントの捉え方を学びました。後編では、具体的なイベント処理の例を見ていきましょう。

3. ボタンをクリックしたら処理を実行

まずは、ボタンがクリックされたときに、何か処理を実行してみましょう。ここでは、ボタンがクリックされたら、コンソールにメッセージを表示し、ボタンのテキストを変更する処理を実装します。

HTMLの準備

まず、ボタンをHTMLに配置します。index.htmlの<h1>タグの下に、以下のコードを追加しましょう。

html

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

<button>タグでボタンを作成し、id="myButton"でmyButtonというIDを付けています。

JavaScriptでイベントを処理する

次に、script.jsに、ボタンがクリックされたときの処理を書いていきます。

javascript

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

function handleClick() {
  console.log("ボタンがクリックされました！");
  myButton.textContent = "クリックされました！";
}

myButton.addEventListener("click", handleClick);

このコードでは、

document.getElementById("myButton")で、myButtonというIDを持つボタン要素を取得し、myButtonという変数に格納しています。
handleClickという関数を定義しています。この関数は、コンソールに「ボタンがクリックされました！」と表示し、myButton.textContentを使ってボタンのテキストを「クリックされました！」に変更します。
myButton.addEventListener("click", handleClick)で、myButton要素にclickイベントのイベントリスナーを登録しています。これで、ボタンがクリックされると、handleClick関数が実行されるようになります。

動作確認

index.htmlをブラウザで開き、ボタンをクリックしてみましょう。コンソールに「ボタンがクリックされました！」と表示され、ボタンのテキストが「クリックされました！」に変われば成功です！

4. マウスオーバーで処理を実行

次に、マウスカーソルが要素の上に乗ったとき（マウスオーバー）と、上から離れたとき（マウスアウト）に、処理を実行してみましょう。ここでは、マウスオーバーで要素の背景色を変え、マウスアウトで元の色に戻す処理を実装します。

HTMLの準備

まず、対象となる要素をHTMLに配置します。index.htmlの<button>タグの下に、以下のコードを追加しましょう。

html

<div id="myDiv">ここにマウスを乗せてね</div>

<div>タグで要素を作成し、id="myDiv"でmyDivというIDを付けています。

CSSでスタイルを設定

このままでは、<div>要素が見えないので、CSSを使ってスタイルを設定しましょう。style.cssを作成し、以下の内容を書き込みます。

css

#myDiv {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
}

index.htmlの<head>タグ内に、以下のコードを追加して、style.cssを読み込みます。

html

<link rel="stylesheet" href="style.css">

これで、myDiv要素に、幅200px、高さ100px、背景色lightblue、テキストを中央揃えで上下方向も中央に配置するスタイルが適用されます。

JavaScriptでイベントを処理する

次に、script.jsに、マウスオーバーとマウスアウトの処理を書いていきます。

javascript

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

function handleMouseOver() {
  myDiv.style.backgroundColor = "lightgreen";
}

function handleMouseOut() {
  myDiv.style.backgroundColor = "lightblue";
}

myDiv.addEventListener("mouseover", handleMouseOver);
myDiv.addEventListener("mouseout", handleMouseOut);

このコードでは、

document.getElementById("myDiv")で、myDivというIDを持つ要素を取得し、myDivという変数に格納しています。
handleMouseOverという関数を定義しています。この関数は、myDiv.style.backgroundColorを使って、myDiv要素の背景色をlightgreenに変更します。
handleMouseOutという関数を定義しています。この関数は、myDiv.style.backgroundColorを使って、myDiv要素の背景色をlightblueに戻します。
myDiv.addEventListener("mouseover", handleMouseOver)で、myDiv要素にmouseoverイベントのイベントリスナーを登録しています。これで、マウスカーソルがmyDiv要素の上に乗ると、handleMouseOver関数が実行されます。
myDiv.addEventListener("mouseout", handleMouseOut)で、myDiv要素にmouseoutイベントのイベントリスナーを登録しています。これで、マウスカーソルがmyDiv要素の上から離れると、handleMouseOut関数が実行されます。

動作確認

index.htmlをブラウザで開き、myDiv要素にマウスカーソルを乗せたり離したりしてみましょう。マウスカーソルが乗ると背景色がlightgreenに変わり、離れると元のlightblueに戻れば成功です！