javascript
投稿日
投稿者 dennie

イベント入門

例えば任意のボックス要素対して、クリックしたら何かをさせたい事があります。

ボックス要素に対してクリックしても、そのままでは何も起きません。
イベントを追加し、任意の処理を実行できるようにする必要があります。

今回は簡単に実例を挙げながらイベントについて簡単に説明しようと思います。

やりたい事

四角をクリックしたら四角の色が変わるような動作をさせます。

実装

HTML

例として、任意のボックス要素を一つ作成します。
今回使用するjavascriptのソースコードは index.js ファイルに記載し、読み込むようにしています。sccも同様です。

<!doctype html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>sample</title>
    <link href="style.css" rel="stylesheet">
    <script defer="defer" src="index.js"></script>
</head>

<body>
    <div class="box_test">
    </div>
</body>

</html>

CSS

例として、ボックス要素に任意の大きさと色を設定します。

.box_test {
  width: 50px;
  height: 50px;
  background-color: black;
}

.active {
  background-color: blue;
}

JavaScript

以下のようになります。

const elements = document.getElementsByClassName('box_test');
for (let element of elements) {
  element.addEventListener('click', function (e) {
    element.classList.toggle('active');
  });
}

説明

今回は「イベント」の話なので javascript に焦点を当てて説明します。

要素の取得

以下のようにクラス名から要素を取得します。

const elements = document.getElementsByClassName('box_test');

要素の取り出し

クラス名は複数の要素に設定する事が出来ます。なのでクラス名で要素を取得すると、複数ある前提で要素が取得される為、繰り返しを使用して一つ一つの要素を取り出す必要があります。

for (let element of elements) {
  ....
}

イベントの追加

今回の本題です。取り出した各々の要素にイベントを追加します。addEventListener を使用するとイベントを追加できます。

element.addEventListener('click', function (e) {
  element.classList.toggle('active');
});

最後に

特にありません。

© DeNnie.Lab All Rights Reserved.