【JavaScript】addEventListenerを試してみた

# サマリ
JavaScriptのaddEventListenerについて、
クリック、マウスオーバー、送信、スクロールについて試しました。


:::note info
実際の動作確認については下記のサイトを参考にさせていただきました。
ありがとうございました。
（以降、**参考サイト**と記述することにします。）

https://pikawaka.com/javascript/addeventlistener

:::


# 背景
JavaScriptを勉強中なのですが、やっぱり自分でいろいろやってみないとわからないだろうと思ったのがきっかけです。

# 対象読者
- addEventListenerを使ってみたい方
- JavaScript初心者（自分含め）

# 前提
推奨：初歩的なHTML・CSS・JavaScriptの知識、テキストエディタ

# 実行環境
- エディタ：VSCode version: 1.96.4(user setup)
- ブラウザ：GoogleChromeバージョン: 134.0.6998.178（Official Build）

# そもそも
そもそもaddEventListenerとは…ということで、
以下のサイト参照しました。

:::note warn
本記事においては実際に試すことに主軸を置いているため、
細かい部分については触れないことをご了承ください。
本当はもっと一つ一つ深く理解したいのですが・・
:::

https://engineering.webstudio168.jp/2023/03/javascript-event-addeventlistener-howtouse-and-listed/

（当たり前ですが）MDNにも情報がまとまっています。

https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Scripting/Events


[上記一つ目のサイト](https://engineering.webstudio168.jp/2023/03/javascript-event-addeventlistener-howtouse-and-listed/)より、

> addEventListener()は、JavaScriptでイベントリスナーを追加するためのメソッドです。イベントリスナーとは、特定のイベントが発生した際に呼び出される関数であり、ユーザーのアクションやWebページの状態の変化など、様々なイベントに対してリアクションを定義することができます。

何かイベント（クリック、マウスオーバー、キーの押下など）の発生をトリガーにリアクション（画面の変化など）を定義できますということですね。

実際にやってみようと思いますが
基本的な構文は以下のようです。

```javascript:hoge.js
const element = document.querySelector("#xxx");
element.addEventListener(event, function, useCapture);
```

elementは任意の文字でOKです。
querySelector部分については、もちろんgetElementById("xxx")でもOKですが、
今はquerySelector("#xxx")の形が多いようなのでそのような記述をしています。
#xxx部分はhtmlファイルのid="xxx"に対応します。

- eventは言わずもがなイベント（クリック、マウスオーバーなど）
- functionはそのイベント受けてのリアクションを定義した関数
- useCaptureはオプションの関数のようで自分のような初学者が早々に使う必要はなさそうなので今回は割愛とさせていただきます（おい

# 事前準備
VSCodeで`index.html`ファイルと、`addEventListener.js`を同一フォルダに作っておきます。
（ファイル名はなんでもいいですが、今回はこのようにしました）
こんな感じです。
これらをそれぞれの項目に合わせて変えていきます。


```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>addEventListener</title>
    <script src="addEventListener.js" defer></script>
</head>
<body>
    <!-- ここに記載 -->
</body>
</html>
```

`addEventListener.js`については
以降、各項目に合わせて記載していきます。

### クリック
まずは一番王道のクリックです。
ボタンをクリックするとアラートがポップアップされるというものです。
htmlはbody部分のみ抜粋します。

```html:index.html
<body>
    <button id="testButton">ここをクリック</button>
</body>
```
```javascript:addEventListener.js
const btn = document.querySelector("#testButton");
btn.addEventListener("click", () => {
    alert("クリックしましたね！");
});
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/e5e6f8f1-ad6e-4d5b-8e43-54b37e9585b0.png)

無事クリックするとアラートが表示されました！

### マウスオーバー

続いてマウスオーバーです。
特定の要素にマウスカーソルを持っていくと、それを契機に動作させるというものです。
今回は参考サイトにならい色を変えます。

```html
<body>
    <div id="testHover">ここにマウスカーソルを乗せて下さい</div>
</body>
```
```javascript
const hvr = document.querySelector("#testHover");
hvr.addEventListener("mouseover", () => {
    hvr.style.backgroundColor = "blue";
});

hvr.addEventListener("mouseout", () => {
    hvr.style.backgroundColor = "red";
});
```

id="testHover"要素にマウスを乗せたら青色、離したら赤色に変わります。
乗せるときと離したときそれぞれで動作の定義をします。
（細かいですが、乗せた時、離したとき、なので、乗せても離してもない一番最初は無色です。）

乗せたとき

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/c19f5bec-bd57-4a21-961d-674464033ab6.png)

離したとき

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/700c34e3-4d63-4c1d-9874-1c932773006b.png)


### 送信

次はフォームの送信です。
入力フォームにテキストを入れ、送信ボタンを押したらアラートが出るという挙動です。


```html:index.html
<body>
    <form id="testForm">
        <input type="text" name="name" required>
        <button type="submit">送信</button>
    </form>
</body>
```


```javascript:addEventListener.js
const frm = document.querySelector("#testForm");
frm.addEventListener("submit", (event) => {
    event.preventDefault();
    alert("送信されました");
});
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/c6c123fa-2a6f-49cd-a895-213891388a04.png)


### 画面のスクロール

画面をスクロールしたら特定の要素（ボタン）がでる挙動です。
こんなのもJavaScriptでできるんですね～！
これに関しては、cssがあったほうが良いため[参考サイト](https://pikawaka.com/javascript/addeventlistener#%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%8C%E9%80%81%E4%BF%A1%E3%81%95%E3%82%8C%E3%81%9F%E6%99%82)にならい、cssを作成しました。


合わせてhtmlファイルにも反映するためhead内に以下のようにlink~の部分を追記します。
```html:index.html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>addEventListener</title>
    <link rel="stylesheet" href="style.css"> <!-- 今回用に追記 -->
    <script src="addEventListener.js" defer></script>
</head>

<body>
    <div id="content">
        サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
    </div>
    <div id="backToTop">トップに戻る</div>
</body>
```

```css:style.css
#content {
    height: 2000px;
  }
  
#backToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #333;
    color: #fff;
    padding: 10px;
    cursor: pointer;
  }
```

```javascript:addEventListener.js
const backToTop = document.getElementById('backToTop');

window.addEventListener('scroll', () => {
  if (window.scrollY > 100) {
    backToTop.style.display = 'block';
  } else {
    backToTop.style.display = 'none';
  }
});

backToTop.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});
```

以下のように

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/688ba5d2-7724-4c7c-a2b9-93d122945370.png)

上記が、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/d5661dc5-ef06-4657-9ffc-299f387c2d12.png)

このように100px進んだところでトップに戻るボタンが出現しました。
（狂気のサンプルテキスト）

もちろん、トップに戻るボタンを押すと一番上に戻りました。


# まとめ
addEventListenerの基本的な使い方について試せたかと思います。
コードの細かい部分の理解には及んでいないため、
今後も地道に学習を進めていきたいと思います。