2014-11-02

2014-11-02

イベント駆動型モデルAdd Star

JavaScript

 

 

イベントとは

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

  1. イベントが発生
  2. イベントハンドラがイベントの発生を検知
  3. イベントに関連付けられた処理を呼び出す

主なイベント

 

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

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

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

 


clickイベント

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

 

 

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

 

 


属性として直接記述
  • ダブルクォートで囲まれた中には、シングルクォートを使う

<buttononclick="alert('こんにちは');">クリック</button>

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

loadイベント

  • Web表示されたタイミングで実行されます
  • 一般的に body要素の属性として指定します
  • head内に記述されたscriptは、body要素が読み込まれる前に実行されますが、loadイベントに関連づけた処理は、body要素の読み込みが完了した後、実行されます

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>JavaScriptの練習</title>
</head>
<bodyonLoad="console.log('こんにちは');">
</body>
</html>

f:id:web-javascript:20140921144003p:image


mouseover/mouseoutイベント

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

focus/blurイベント

  • 要素にフォーカスが当たったとき・外れたときに実行されます

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<p><inputtype="text"onfocus="console.log('フォーカスを取得しました');"onblur="console.log('フォーカスが外れました');"></p>
</body>
</html>

f:id:web-javascript:20140921173616p:image


changeイベント

  • セレクトボックスなどの選択項目が変更された場合に実行されます

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<selectonchange="console.log('項目が変更されました');">
  <option>りんご</option>
  <option>いちご</option>
  <option>みかん</option>
</select>
</body>
</html>

f:id:web-javascript:20140921174139p:image