JavaScriptでのイベント実装方法

# 3種類のイベントハンドラの実装方法

コードで書かれている`target`はイベントハンドラをつけたいオブジェクトや要素です。


## HTML属性を使用

```javascript
<body onload="myfunc()">
</body>

<script>
  const myfunc () => {
    //実行したい処理
  }
</script>
```

##イベントプロパティを使用

```javascript:無名関数を使用
target.onload = () => {
  //実行したい内容
}
```

```javascript
target.onload = myfunc;

const myfunc = () => {
  //実行したい内容
}
```

##イベントリスナーを使用

```javascript:即時関数を使用
target.addEventListener('DOMContentLoaded', () => {
  //実行したい内容
});
```

```javascript
target.addEventListener('DOMContentLoaded', myfunc);

const myfunc = () => {
  //実行したい内容
}
```

イベントリスナーを使うメリットは下記2点。
・同じ要素に複数のイベント設定が可能
・早く実行される
　⇒画像の読み込みなどで時間がかかり、早い段階でJavaScriptの処理を行いたい場合は、`DOMContentLoaded`を使った方がよい。


## addEventListenerの詳細

```javascript
対象要素.addEventListener(種類, 関数, [,useCapture])
```

第3引数のuseCaptureはページの読み込みをする順番を設定しています。

`true`の場合は上から実行される。(Capture Phase)
`fasle`の場合は下から実行される。(Bubbling Phase)
記載しない場合は`false`の設定になっていて、基本的には`false`で問題ないです。
(参考：[addEventListener()の第３引数の意味とかをちゃんと理解する為のメモ](https://snaka72.hatenadiary.org/entry/20100925/1285404467))

ただし、第三引数はboolean以外も設定可能ということでデフォルトは下記にしておくのがよさそう。

```javascript
対象要素.addEventListener(種類, 関数, {
once: true,
passive: true,
capture: false})
```
(参考：[addEventListener の第3引数が拡張されてるという話](https://qiita.com/kozy4324/items/85831e2c990d92b8397b))


# イベントの種類

| イベントの種類 | 内容 |
|:---|:---|
| load | Webページの読み込みが完了した時に発動（画像などのリソースすべて含む） |
| DOMContentLoaded | Webページが読み込みが完了した時に発動（画像などのリソースは含まない） |
| click | マウスボタンをクリックした時に発動 |
| mousedown | マウスボタンを押している時に発動 |
| mouseup | マウスボタンを離したときに発動 |
| keydown | キーボードのキーを押したときに発動 |
| keyup | キーボードのキーを離したときに発動 |
| keypress | キーボードのキーを押している時に発動 |
| change | フォーム部品の状態が変更された時に発動 |
| submmit | フォームのsubmitボタンを押したときに発動 |
| scroll | 画面がスクロールした時に発動 |


多すぎるので他は下記を参照。
[JavaScriptのイベントハンドラ一覧](https://phpjavascriptroom.com/?t=js&p=event)


# イベント発生時に内容を受け取る方法

```javascript
document.getElementById("id").onclick = myfunc;

const myfunc = (e) => {
  console.log(e.target);
}
```
この時、引数のeにはその前につかんでいる要素"id"の情報が渡されていてその情報を使用することが可能です。

## イベント発生時に受け取るオブジェクトについて

| コード | 意味 |
|:---|:---|
| e.type | イベントの種類を取得 |
| e.target | イベントが送られたオブジェクト |
| e.srcElement | イベントが送られたオブジェクト |
| e.clientX/Y | ブラウザ領域の左上を原点とする座標 |
| e.screenX/Y | 画面左上を原点とする座標 |
| e.pageX/Y | ページの左上を原点とする座標 |
| e.offsetX/Y | イベント発生元の要素の左上を原点とする座標 |


![2020-03-23_22h50_54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428239/599113b5-cce8-f568-aa23-4b466b696db5.jpeg)

まだよくわかっていないが、`event.target`と`event.srcelement`はブラウザによって動く動かないがあるらしい。
次の[サイト](https://mahoris-program.blog.ss-blog.jp/JavaScript_event_getTarget)にどちらでも動くように実装するコードが載っていたのでこちらを採用しよう。

```javascript
function getTarget() { return this.srcElement || this.target; }
Event.prototype.getTarget = getTarget;
```

## targetで使えるプロパティ・メソッド

基本的には下記URLに乗っているメソッドは使えるのかな？
[Element](https://developer.mozilla.org/ja/docs/Web/API/Element)

便利で使えそうなメソッドをメモ

| メソッド・プロパティ | 説明 |
|:---|:---|
| innerHTML | 要素内容のマークアップをStringで返す |
| tagName  | 要素のタグ名をStringで返す |
| getBoundingClientRect() | 要素のサイズと、ビューポートにおける位置を返します。 |

あまりわからなかったので随時追加


【参考資料】
[ゲームで学ぶJavaScript入門 HTML5&CSSも身につく！](https://www.amazon.co.jp/%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%A7%E5%AD%A6%E3%81%B6JavaScript%E5%85%A5%E9%96%80-HTML5-CSS%E3%82%82%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8F%EF%BC%81-%E7%94%B0%E4%B8%AD-%E8%B3%A2%E4%B8%80%E9%83%8E-ebook/dp/B019WTE1FE)
[【JavaScript入門】addEventListener()によるイベント処理の使い方！](https://www.sejuku.net/blog/57625)