イベント駆動型モデル

イベントとは

  • 何かのきっかけで処理を行うことを「イベント」と呼びます
  • イベントが発生したときに対応する処理を呼び出す仕組みを「イベント駆動型モデル」と呼びます
  • それぞれのイベントと任意の処理をあらかじめ関連付けておくと、「イベントハンドラ」と呼ばれる機能がイベントの発生を検知し、対応する処理を呼び出します
  1. イベントが発生
  2. イベントハンドラがイベントの発生を検知
  3. イベントに関連付けられた処理を呼び出す
主なイベント

種類 発生するタイミング イベントハンドラ名
load ページが表示されたとき onload
click ページ上の部品がクリックされたとき onclick
mouseover

ページ上の部品にマウスカーソルが乗ったとき

 onmouseover
mouseout ページ上の部品からマウスカーソルが外れたとき onmouseout
focus ページ上の部品にフォーカスが当たったとき onfocus
blur ページ上の部品からフォーカスが外れたとき onblur
change セレクトボックスなどの選択肢が変更されたとき onchange

clickイベント

  • イベントが発生したタイミングで処理を行うには、Webページとイベントハンドラを関連付ける必要があります
  • イベントハンドラは、HTMLタグの属性です
  • 属性値の部分に、イベント発生時に実行する処理（JavaScript）を記述します



<要素名 イベントハンドラ名="JavaScriptによる処理">

属性として直接記述
  • ダブルクォートで囲まれた中には、シングルクォートを使う
<button onclick="alert('こんにちは');">クリック</button>

loadイベント

  • Web表示されたタイミングで実行されます
  • 一般的に body要素の属性として指定します
  • head内に記述されたscriptは、body要素が読み込まれる前に実行されますが、loadイベントに関連づけた処理は、body要素の読み込みが完了した後、実行されます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body onload="console.log('こんにちは');">
</body>
</html>


mouseover/mouseoutイベント

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<p><img src="img/01.jpg" onmouseover="console.log('カーソルが乗っています');" onmouseout="console.log('カーソルが外れました');"></p>
</body>
</html>

focus/blurイベント

  • 要素にフォーカスが当たったとき・外れたときに実行されます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<p><input type="text" onfocus="console.log('フォーカスを取得しました');" onblur="console.log('フォーカスが外れました');"></p>
</body>
</html>


changeイベント

  • セレクトボックスなどの選択項目が変更された場合に実行されます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<select onchange="console.log('項目が変更されました');">
  <option>りんご</option>
  <option>いちご</option>
  <option>みかん</option>
</select>
</body>
</html>



イベント発生時に行う処理をまとめた関数を記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
<script>
  function sayHello() {
    alert('こんにちは');
  }
</script>
</head>
<body>
<button onclick="sayHello();">クリック</button>
</body>
</html>

関数とは

  • 一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます
  • 手間のかかる処理を関数として定義しておけば、必要なときに何度も呼び出すことができます
  • 関数は処理の材料となる「引数」を受け取ります
  • 処理が終了すると「戻り値」と呼ばれる処理結果を返します
  1. 自作関数：自分で定義して使う
  2. 組み込み関数：プログラミング言語がすでに組み込んであるもの
引数も戻り値もない関数の書き方
  • 関数は、function文を使って定義する
  • 定義した関数を実行するときは、関数名を記述するだけ
  • 定義の際も呼び出しの際も、関数名の後ろに必ず「()」をつける


関数の定義

function 関数名 () {
　　処理;
}

定義した関数の呼び出し方

関数名 ();


《引数も戻り値もない関数の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>関数の使い方</title>
</head>
<body>
<script>
  //関数の定義
  function sayHello() {
    console.log('こんにちは');
  }
  sayHello();  //関数の呼び出し
</script>
</body>
</html>


《実行結果》


関数の定義は記述順序に関係なく優先的に行われるので、関数の呼び出しが先に記述されてもいても問題なく動作します。

<script>
  sayHello();  //関数の呼び出し
  //関数の定義
  function sayHello() {
    console.log('こんにちは');
  }
</script>