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

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

イベント

• イベントとは

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

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

例

<form action="#" id="form">
  <input type="submit" value="検索">
</form>

<script>
'use strict';

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

　要素にイベントを設定する一般的な書き方

書き方

取得した要素.onsubmit(イベント) = function() {
  //処理内容
}; 

　取得した要素のイベントに、＝の演算子を使ってフィンクション（関数）を代入するかたちで
　イベントが発生した時の処理内容を設定する。
　イベントに代入するフィンクション（関数）には、フィンクション名は付けない。

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

.js

document.getElementById('form')

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

.js

document.getElementById('form').onsubmit = function() {
  //処理内容
}; 

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

.js

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

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

• 「addEventListener( )」とは

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

.text

取得した要素.addEventListener( イベント名, 関数, false )

　- 第1引数にイベントの種類を指定する
　- 第2引数に関数を指定する。そして、関数内に書かれた処理を実行させる。
　- 第3引数は、イベント伝搬の方式を「true / false」で指定する。
　　通常はfalseを指定する（第3引数は省略されがち）

• 関数設定方法

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

.text

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

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

例

let btn = document.getElementById('form');

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

btn.addEventListener("submit", greet, false);

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

.text

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

例

let btn = document.getElementById('form');
 
btn.addEventListener('submit', function() {  
  console.log("Hello world");
}, false);

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

例

let btn = document.getElementById('form');
 
btn.addEventListener('submit', ( ) => {  
  console.log("Hello world");
}, false);

過去投稿記事

【JavaScript ~変数・定数、if文・switch文~】勉強メモ
【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②
【JavaScript ~関数について~】勉強メモ③
【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④
【JavaScript ~ファイルの分割について~】勉強メモ⑤
【JavaScript 読み込み】勉強メモ⑥
【JavaScript ~配列のメソッド~】勉強メモ⑦
【JavaScript ~コールバック関数~】勉強メモ⑧
【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨
【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11
【JavaScript ~Mathオブジェクト~】勉強メモ12