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名")メソッドを使って要素を取得する。
document.getElementById('form')
次に、この取得した要素に、どのような処理要求をさせたいかのイベントを記載し、
＝の演算子を使ってフィンクション（関数）を代入。
document.getElementById('form').onsubmit = function() {
//処理内容
};
最後に、フィンクション（関数）の{ }の中に、イベントが発生した時に実行させたい処理を書く。
document.getElementById('form').onsubmit = function() {
console.log('クリックされました');
};
addEventListener( )によるイベント処理
- 「addEventListener( )」とは
- 「addEventListener( )」は、JavaScriptからさまざまなイベント処理を実行することができるメソッド。
- 基本的な書き方
取得した要素.addEventListener( イベント名, 関数, false )
- 第1引数にイベントの種類を指定する
- 第2引数に関数を指定する。そして、関数内に書かれた処理を実行させる。
- 第3引数は、イベント伝搬の方式を「true / false」で指定する。
通常はfalseを指定する（第3引数は省略されがち）
- 関数設定方法
- 外部の関数を設定する方法
ファイルが複数に分割されている場合などに使われるのが一般的。
function sample() {
//ここに処理を記述する
}
対象要素.addEventListener(種類, sample(関数名), false);
let btn = document.getElementById('form');
function greet() {
console.log("Hello world");
}
btn.addEventListener("submit", greet, false);
- 無名関数を設定
単純な処理しか記述しないようなケースでは、関数を別で用意するよりもコードが分かりやすくなるので
この方法を用いる。また、この書き方が一般的な書き方となる。
対象要素.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