JavaScript 基礎編 (イベント)

# この記事の内容について
　フロントエンドの第一歩としてJavaScriptの基礎学習を始めました。アウトプットとして、JavaScriptのオブジェクトやDOM操作などをまとめていこうと思います！
　私はまだエンジニア歴1年未満の初学者なので、間違い等があればご指摘いただけると幸いです。

# JavaScript 基礎編
* [ブラウザオブジェクト / DOM](https://qiita.com/Nao52/items/c6b7531b85a5e4a6c8dc)
* [イベント](https://qiita.com/Nao52/items/6705eeca68a77b3f280a)
* [通信と非同期処理](https://qiita.com/Nao52/items/3ae127867cee0f838643)
* [ミニアプリの開発](https://qiita.com/Nao52/items/ed9f64a9b1c1da91abc0)

# JavaScript 応用編
* [モダンなJavaScriptの機能](https://qiita.com/Nao52/items/5ee9c2af96b4e9dfd278)

# イベント
### イベントを設定する
```
要素.addEventListenner(イベント名, 関数名);
```
## 様々なイベント

### Clickイベント
```html:ボタンをクリックするとアラートを表示する
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <button type="button">ボタン</button>

  <script>
    function alertMessage() {
      alert('ボタンをクリックしました');
    }

    const btn = document.querySelector('button');
    btn.addEventListener('click', alertMessage);
  </script>
</body>
</html>
```
### inputイベント
```html:フォームを入力するとイベントが発生
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="text">

  <div class="content">
    <p>入力内容を表示する</p>
  </div>

  <script>
    const input = document.querySelector('input');

    input.addEventListener('input', function (event) {
      const newElement = document.createElement('p');
      newElement.textContent = event.currentTarget.value;
      const content = document.querySelector('.content');
      content.append(newElement);
    })
  </script>
</body>
</html>
```

```html:チェックボックスを選択するとイベントが発生
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <input type="radio" name="gender" value="男性" class="radio">男性
  <input type="radio" name="gender" value="女性" class="radio">女性

  <div class="content">
    <p>入力内容を表示する</p>
  </div>

  <script>
    const radios = document.querySelectorAll('.radio');
    for (let radio of radios) {
      radio.addEventListener('input', function (event) {
        const newElement = document.createElement('p');
        const value = event.currentTarget.value;
        newElement.textContent = `${value}がチェックされました`;
        const content = document.querySelector('.content');
        content.append(newElement);
      })
    }

  </script>
</body>

</html>
```

```html:セレクタを設定するとイベントが発生
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <select class="select">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>

  <div class="content">
    <p>入力内容を表示する</p>
  </div>

  <script>
    const select = document.querySelector('.select');
    select.addEventListener('input', function (event) {
      const value = event.currentTarget.value;
      const newElement = document.createElement('p');
      newElement.textContent = `${value}が選択されました`;
      const content = document.querySelector('.content');
      content.append(newElement);
    })

  </script>
</body>

</html>
```

### keydown / keyupイベント
```html:キーを押すとイベントが発生
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <input type="text">

  <div class="content">
    <p>入力内容を表示する</p>
  </div>

  <script>
    const input = document.querySelector('input');
    input.addEventListener('keydown', function (event) {
      const newElement = document.createElement('p');
      newElement.textContent = `タイプされたkey:${event.key}`;
      const content = document.querySelector('.content');
      content.append(newElement);
    })

  </script>
</body>

</html>
```

### mousemove / mousedown / mouseupイベント
```html:マウスを動かすとイベントが発生
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <div style="width: 200px; height: 100px; background: pink;"></div>

  <p>このテキストが変わります</p>

  <script>
    const div = document.querySelector('div');
    const text = document.querySelector('p');
    div.addEventListener('mousemove', function (event) {
      text.textContent = `Move:x = ${event.offsetX}, y = ${event.offsetY}`;
    });
    div.addEventListener('mousedown', function (event) {
      text.textContent = `Down:x = ${event.offsetX}, y = ${event.offsetY}`;
    });
    div.addEventListener('mouseup', function (event) {
      text.textContent = `Up:x = ${event.offsetX}, y = ${event.offsetY}`;
    });

  </script>
</body>

</html>

```

### scrollイベント
```html:画面をスクロールするとイベントが発生
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    .content {
      height: 5000px;
    }

    .text {
      position: fixed;
    }

  </style>
</head>

<body>
  <div class="content">
    <p class="text">スクロール量が表示されます</p>
  </div>

  <script>
    window.addEventListener('scroll', function (event) {
      const p = document.querySelector('.text');
      p.textContent = `スクロール量は${window.scrollY}pxです`;
    });

  </script>
</body>

</html>

```

## イベント発生元の要素にアクセスする
```html:ボタンをクリックするとテキストが変わるWebページ
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <button type="button">ボタン</button>

  <script>
    const button = document.querySelector('button');
    button.addEventListener('click', function (event) {
      const button = event.currentTarget;
      button.textContent = '変更します';
    });

  </script>
</body>

</html>

```

## currentTargetとtargetの違い
* currentTarget
→ addEventListenerを設定した要素
* target
→ 設定したイベントが発生した要素
```html:currentTargetとtargetの違い
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <button type="button">
    <span>span要素です</span>
    button要素です
  </button>

  <script>
    const button = document.querySelector('button');
    button.addEventListener('click', function (event) {
      console.log(event.currentTarget);
      console.log(event.target);
    });

  </script>
</body>

</html>
```
#### 要約
常にイベント設定した要素を取得したい
→ currentTargetを使う！！
実際にイベントが発生した要素を取得したい
→ targetを使う！！
「通常であれば**currentTarget**の方が使いやすい」

## 規定の動作を停止する
```
イベントオブジェクト.preventDefault();
```

```html:ページ遷移時、動作を停止して確認をするWebページ
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <a href="https://example.com">リンク</a>

  <script>
    function confirmLink(event) {
      if (confirm('ページ遷移をしますか？')) {
        console.log('実行しました');
      } else {
        event.preventDefault();
        console.log('キャンセルしました')
      }
    }

    const link = document.querySelector('a');
    link.addEventListener('click', confirmLink);

  </script>
</body>

</html>

```