イベント
イベントドリブン
- イベントドリブン
-
イベント(要素に対するキー入力やマウスクリック）が発生すると、それを契機としてあらかじめ指定しておいた処理を行う。
- イベントの種類
-
Load リソースがロードされたとき Unload リソースがアンロードされたとき Focus 対象からフォーカスが当たったとき Blur 対象からフォーカスが外れたとき Change フォーム要素の値が変更されたとき Select テキストが選択されたとき Click マウスがクリックされたとき Contextmenu マウスが右クリックされたとき DblClick マウスがダブルクリックされたとき MouseDown マウスボタンが押されたとき MouseUp マウスボタンが離されたとき MouseOver マウスポインタが要素の上に乗ったとき MouseOut マウスポインタが要素から離れたとき MouseMove マウスポインタが要素上を移動したとき KeyPress キー入力されたとき KeyDown キーが押されたとき KeyUp キーが離されたとき
イベントハンドラ
- html側
- 要素内のon[イベント名]属性に実行したい処理を具体的に記述
- JavaScript側
- on[イベント名]で行いたい処理を関数として定義（必要な場合）
<div onclick="function_name(実引数);">
function function_name(仮引数) {
}
イベントリスナ
- html側
- 要素を定義
- JavaScript側
-
- イベント実行時に行いたい処理を関数として定義（必要な場合）
- イベントリスナに登録したい処理を具体的に記述し、関数として定義(この中で1.の関数を実引数を代入して呼び出しておく。1.の関数に引数がない場合は不要)
- 要素に対して、イベント名とそのイベントから呼び出したい処理内容(2.)を指定する
DOMでの要素指定.addEventLister(イベント名,呼び出したい処理内容(2.),false); - ※ページ読み込み時に呼び出すためにはさらに
window.addEventListener('load', function() {3.のイベントリスナ登録},false);
- 意義
- htmlからjavascriptの記述を排除できる
<div id="no1">
//関数の定義
function function_name(仮引数){
}
//ページ読み込み時（windowに対するloadイベント)に行いたい処理
window.addEventListener('load', function() {
//イベントリスナに登録したい具体的な処理内容（関数）
var event_listener_name = function(){
function_name(実引数);
}
//指定の要素(no1)にイベント発生時に指定の処理内容（関数）を呼び出す
document.getElementById('no1').addEventListener('click',event_listener_name,false);
},false);
/*
window.onload = function(){
document.getElementById('no1').addEventListener('click',event_listener_name,false);
}
と書いても良い(イベントハンドラを使用)。
*/