DOM操作の簡略化：
Nodeにイベントハンドラ属性を追加
イベントハンドラ属性を追加する。既に設定されている場合にも、後ろに追加して設定できる。
Node.setAttribute('onclick','aFunction()') → $setAttr(Node,'onclick','aFunction()')
document.body.setAttribute('onresize','aFunction()') → $setAttr(document.body,'onresize','aFunction()')
Node
Nodeを指定 id値を文字列で指定してもよい ／ document.body を指定することも可
String1
イベントハンドラ属性を文字列で渡す (例) onresize ・ onscroll ・ onclick ・ onmouseover
String2
関数を文字列で渡す (例) aFunction() ・ alert('ok')
●必須引数 ●オプション引数(省略可能)
記述例
$setAttr(NodeArray[0], 'onmouseover', 'aFunction()')
$setAttr(document.body, 'onresize', 'aFunction(self)')
動作サンプル
ボタンの onclick に Function(関数) を設定してから、ボタンをクリックして動作確認。
HTML :
<button type="button" onclick="$setAttr($id('sample_btn'),'onclick','function1()')">右のボタンに onclick を設定</button>
<button type="button" id="sample_btn">クリックで文字サイズが増える</button>
Javascript :
var testNum1=16;
function function1() { //クリックで文字サイズが増える関数
testNum1+=3;
$id('sample_btn').style.fontSize=testNum1+"px";
}
各ボタンで <body> の onscroll に Function(関数) を追加してから、ページをスクロールして動作確認。
HTML :
<button type="button" onclick="$setAttr(document.body,'onscroll','function2()')">スクロールする度に数が増える<br><span id="result_span2">function2 = 0</span></button>
<button type="button" onclick="$setAttr(document.body,'onscroll','function3()')">スクロールする度に数が減る<br><span id="result_span3">function3 = 1000</span></button>
Javascript :
var testNum2=0;
var testNum3=1000;
function function2() { //スクロールする度に数が増える関数
testNum2++;
var tarSpan=$id('result_span2');
$toHTML(tarSpan,'function2 = '+testNum2); //ボタン内のカウントを更新
}
function function3() { //スクロールする度に数が減る関数
testNum3--;
var tarSpan=$id('result_span3');
$toHTML(tarSpan,'function3 = '+testNum3); //ボタン内のカウントを更新
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。