イベント
イベントドリブン
イベント(要素に対するキー入力やマウスクリック)が発生すると、それを契機としてあらかじめ指定しておいた処理を行う。
イベントの種類
イベントハンドラ
- 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の記述を排除できる