イベント
イベントドリブン
イベント(要素に対するキー入力やマウスクリック）が発生すると、それを契機としてあらかじめ指定しておいた処理を行う。
イベントの種類
イベントハンドラ
- html側
- 要素内のon[イベント名]属性に実行したい関数名
- JavaScript側
- on[イベント名]で行いたい処理を関数として定義
<div onclick="function_name();">
function function_name() {
//処理;
}
例
function changeTextA(){ document.getElementById('here').innerHTML='ポインタを外して'; } function changeTextB(){ document.getElementById('here').innerHTML='ポインタをここに'; }
<p id="here" onMouseOver="changeTextA()" onMouseOut="changeTextB()">ポインタをここに</p>
ポインタをここに
イベントリスナ
- 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);
}
と書いても良い(イベントハンドラを使用)。
*/