【JavaScript基礎】クリック時やマウス操作時に発生するイベントについて

JavaScriptにおける__「クリックやマウス操作に合わせて発生するイベント」__について、自己の忘備録としてまとめています。

## 参考URL
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference

## 参考著書
https://www.amazon.co.jp/JavaScript-%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AC%E3%82%B7%E3%83%94%E9%9B%86-%E6%B1%A0%E7%94%B0-%E6%B3%B0%E5%BB%B6/dp/4297103680/ref=sr_1_7?dchild=1&keywords=javascript&qid=1618412284&sr=8-7

### クリック時の処理をする

要素のクリック時、タップ時にイベントを発生させるためには、__clickイベント__使用します。

https://developer.mozilla.org/ja/docs/Web/API/Element/click_event

```html
<!-- HTML -->
<button class="btn"></button>
```
```js
// JS
const btn = document.querySelector('.btn');

btn.addEventListener('click',()=>{
    console.log('ボタンがクリックされました。');
})
```

### マウスを押したときや動かしたときに処理をする
- __マウスをクリックしたとき__
- __マウスを離したとき__
- __マウスの動かしているとき__

の３つのマウス操作イベントに対して処理をする時はそれぞれ下記のイベントを使用します。

| イベント名 | 発生タイミング           | 
| ---------- | ---------------------|
| mousedown  | マウスボタンを押したとき |
| mouseup    | マウスボタンを離したとき |
| mousemove  | マウスを動かしたとき    |

```html
<!-- HTML -->
<main class="main">
  <div class="target"></div>
</main>
```
```js
// JS
const targetArea = document.querySelector('.target');

// 対象エリアでマウスボタンを押したら、ログを出力
targetArea.addEventListener('mousedown', () => {
    console.log('マウスボタンを押した。');
});

// 対象エリアでマウスボタンを離したら、ログを出力
targetArea.addEventListener('mouseup', () => {
    console.log('マウスボタンを離した。');
})

// 対象エリア上でマウスを動かしたら、ログを出力
targetArea.addEventListener('mousemove',()=>{
    console.log('マウスを動かした。');
})
```

### マウスオーバー時に処理をする

マウスオーバー時に処理をする場合、

- __カーソルが要素上に乗ったとき__
- __カーソルが要素上から離れたとき__

の２パターンがあり、それぞれ下記のイベントを使用します。

| イベント名 | 発生タイミング                                   | 
| ---------- | -------------------------------------------- |  
| mouseenter | カーソルが要素上に乗ったとき                     | 
| mouseover  | カーソルが要素上に乗ったとき__（バブリングあり）__   |    
| mouseleave | カーソルが要素上から離れたとき                   | 
| mouseout   | カーソルが要素上から離れたとき__（バブリングあり）__ |    

乗ったとき、離れたときそれぞれ２つずつイベントがありますが、それらの違いは__バブリングの有無__です。

#### バブリングとは

バブリングとは、ある要素で発生したイベントが__親要素や先祖要素に伝わること__です。

https://www.webprofessional.jp/event-bubbling-javascript/


それ以外の基本的な使い方は同じです。

```html
<!-- HTML -->
<main class="main">
  <div class="target"></div>
</main>
```

```js
// JS
const targetArea = document.querySelector('.target');

// 要素にカーソルが乗った時
targetArea.addEventListener('mouseenter', () => {
    console.log('要素上にカーソルが乗りました。');
});

// 要素にカーソルが乗った時（バブリングあり）
targetArea.addEventListener('mouseover', () => {
    console.log('要素上にカーソルが乗りました。');
});

// 要素にカーソルが乗った時
targetArea.addEventListener('mouseleave', () => {
    console.log('要素上からカーソルが離れました。');
});

// 要素にカーソルが乗った時（バブリングあり）
targetArea.addEventListener('mouseout', () => {
    console.log('要素上からカーソルが離れました。');
});

```

### マウス操作時の座標を取得する

clickイベントやmousemoveイベントなどのマウス操作イベントが発生した際のイベントは、__MouseEventオブジェクト__です。__MouseEventオブジェクト__はイベント発生時の座標情報が含まれており、いくつかのプロパティがあります。

| プロパティ    | 内容                            | 型   | 
| ------------- | ------------------------------- | ---- | 
| event.clientX | ブラウザー左上を基準としたX座標 | 数値 | 
| event.clientY | ブラウザー左上を基準としたY座標 | 数値 | 
| event.offsetX | 要素左上を基準としたX座標       | 数値 | 
| event.offsetY | 要素左上を基準としたY座標       | 数値 | 
| event.pageX   | ページ左上を基準としたX座標     | 数値 | 
| event.pageY   | ページ左上を基準としたY座標     | 数値 | 
| event.screenX | デバイス左上を基準としたX座標   | 数値 | 
| event.screenY | デバイス左上を基準としたY座標   | 数値 | 

clientX・clientY、clientX・clientYは表の内容通りです。

pageX・pageYは、__ページスクロール量__が加味されます。
screenX・screenYは__Webページを見ているデバイス（スマートフォンやパソコン）の左上が基準__になります。

```html
<!-- HTML -->
<main class="main">
  <div class="target"></div>
</main>
```

```js
// JS
const targetArea = document.querySelector('.target');

// ブラウザ左上を基準としたX座標とY座標を出力
targetArea.addEventListener('mousemove',(event) => {
    console.log(event.clientX, event.clientY);
})

```