【JavaScript ~イベント~】勉強メモ⑩

JavaScriptちゃんと学習中。
今回はイベントについてあらためて勉強し直した。
ほぼ自分の勉強メモです。
過度な期待はしないでください。


イベント
-
- イベントとは

　JavaScriptにおけるイベントとは、HTMLの要素に対して行われた処理要求のことを言う。
　例えば、「ブラウザ上のボタンをクリックした」「要素に値が入力された」「要素の上にマウスカーソルを乗せた」などの動作がイベントに当たる。
　
　イベントの種類一覧記事：[JavaScript イベントハンドラ](https://web-designer.cman.jp/javascript_ref/event_list/)
<br>

- 送信ボタンがクリックされたら、入力内容はサーバーに送信されるという例を元に手順の説明


```.html:例
<form action="#" id="form">
  <input type="submit" value="検索">
</form>

<script>
'use strict';

document.getElementById('form').onsubmit = function() {
  console.log('クリックされました');
};
</script>
```
<br>
　要素にイベントを設定する一般的な書き方

```.text:書き方
取得した要素.onsubmit(イベント) = function() {
  //処理内容
}; 
```
　取得した要素のイベントに、＝の演算子を使ってフィンクション（関数）を代入するかたちで
　イベントが発生した時の処理内容を設定する。
　イベントに代入するフィンクション（関数）には、フィンクション名は付けない。
<br>

　先ずは、documentオブジェクトとgetElementById("id名")メソッドを使って要素を取得する。

```.js
document.getElementById('form')
```
<br>

　次に、この取得した要素に、どのような処理要求をさせたいかのイベントを記載し、
　＝の演算子を使ってフィンクション（関数）を代入。

```.js
document.getElementById('form').onsubmit = function() {
  //処理内容
}; 
```
<br>

　最後に、フィンクション（関数）の{　}の中に、イベントが発生した時に実行させたい処理を書く。

```.js
document.getElementById('form').onsubmit = function() {
  console.log('クリックされました');
}; 
```
<br>

addEventListener( )によるイベント処理
-

- 「addEventListener( )」とは

　- 「addEventListener( )」は、JavaScriptからさまざまなイベント処理を実行することができるメソッド。
　
　- 基本的な書き方

```.text
取得した要素.addEventListener( イベント名, 関数, false )
```
　- 第1引数にイベントの種類を指定する
　- 第2引数に関数を指定する。そして、関数内に書かれた処理を実行させる。
　- 第3引数は、イベント伝搬の方式を「true / false」で指定する。
　　通常はfalseを指定する（第3引数は省略されがち）
<br>

- 関数設定方法

　- 外部の関数を設定する方法
　ファイルが複数に分割されている場合などに使われるのが一般的。

```.text
function sample() {  
  //ここに処理を記述する
}

対象要素.addEventListener(種類, sample(関数名), false);
```

```.js:例
let btn = document.getElementById('form');

function greet() {
  console.log("Hello world");
}

btn.addEventListener("submit", greet, false);
```
<br>

　- 無名関数を設定
　単純な処理しか記述しないようなケースでは、関数を別で用意するよりもコードが分かりやすくなるので
　この方法を用いる。また、この書き方が一般的な書き方となる。

```.text
対象要素.addEventListener(種類, function() {
  //ここに処理を記述する
}, false);
```

```.js:例
let btn = document.getElementById('form');
 
btn.addEventListener('submit', function() {  
  console.log("Hello world");
}, false);
```
<br>

　- アロー関数を設定
　「function( )」の部分を「( ) =>」として、定義する方法。

```.js:例
let btn = document.getElementById('form');
 
btn.addEventListener('submit', ( ) => {  
  console.log("Hello world");
}, false);
```
<br>

<br>

過去投稿記事
-
[【JavaScript ~変数・定数、if文・switch文~】勉強メモ](https://qiita.com/k-yasuhiro/items/1fb63f0881faf67bcb29)
[【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②](https://qiita.com/k-yasuhiro/items/6625942cc901feb6bfdf)
[【JavaScript ~関数について~】勉強メモ③](https://qiita.com/k-yasuhiro/items/52e3ebb79bb0248a7c5e)
[【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④](https://qiita.com/k-yasuhiro/items/52e3ebb79bb0248a7c5e)
[【JavaScript ~ファイルの分割について~】勉強メモ⑤](https://qiita.com/k-yasuhiro/items/209eda27bbc61ae961a1)
[【JavaScript 読み込み】勉強メモ⑥](https://qiita.com/k-yasuhiro/items/fe3fc2bd7b14fe4f3968)
[【JavaScript ~配列のメソッド~】勉強メモ⑦](https://qiita.com/k-yasuhiro/items/279b7bb59f112f917c51)
[【JavaScript ~コールバック関数~】勉強メモ⑧](https://qiita.com/k-yasuhiro/private/ded7e2cad732774d059e)
[【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨](https://qiita.com/k-yasuhiro/items/7a72bf38d78b141d6fac)
[【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11](https://qiita.com/k-yasuhiro/items/fa586154cf7064eb7058)
[【JavaScript ~Mathオブジェクト~】勉強メモ12](https://qiita.com/k-yasuhiro/items/b931a15fb71322ee3cca)