イベント・UI：
イベントリスナの追加
指定したオブジェクトにイベントリスナを設定する。
Object
対象とするオブジェクトを渡す window または DOM Object(Node)
String
イベントのタイプを渡す ※「on〜」のonを省いた形
- 【window用】load, resize, unload など
- 【DOM Node用】click, museover, mouseout, mousedown, mouseup, keypress, keydown, keyup, change など
Function
イベント発生時に実行する関数を指定
Bool
追加時に関数を実行 true = 実行する ・ false = 実行しない ／ 省略した場合は false となる
●必須引数 ●オプション引数(省略可能)
記述例
$addEL(window, 'resize', aFunction)
$addEL(window, 'resize', aFunction, true)
$addEL($id('aNode'), 'mouseover', aFunction)
動作サンプル
input の onkeyupイベントに関数を設定する。設定する関数は、有効なHEX値が入力されると input自体の背景色を変化させる内容となっている。
HTML :
<form>
<input type="text" id="sample1" value="FFFFFF">
</form>
Javascript :
$addEL($id('sample1'),'keyup',func1,true);
function func1() { // input要素のonkeyupイベントで実行される
$id("sample1").style.backgroundColor="#"+$id("sample1").value;
}
指定Nodeの onmouseover と onmouseoutイベントに関数を設定する。設定する関数は、指定Nodeの背景色を変える内容となっている。
ポインタをロールオーバーして確認
Javascript :
function func3() {
$addEL($id('sample2'),'mouseover',func3over);
$addEL($id('sample2'),'mouseout',func3out);
}
function func3over() { // onmouseoverイベント用
$id('sample2').style.background="#31b1bc";
}
function func3out() { // onmouseoutイベント用
$id('sample2').style.background="#8eb8bd";
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。