bodyの中からイベントハンドラをなくす(Mozilla)
さて、ここからが本題です。HTMLソースからイベントハンドラをなくします。尚サンプルはFireFoxとかじゃないと動きません。IE非対応。
で、onclickさんがどっかいっています。どこにいったかというと、
document.getElementById("button3").addEventListener("click",test3,false);
この行にいます。addEventListenerというのがイベントハンドラの変わりになるものです。
オブジェクト.addEventListener(イベント,関数,false)ってなかんじで書くと制御できるんですが、これだとHEADの中に書いても下のソースが読み込む前に実行されるのでエラーがおきてしまいます。なのでこの一文が入ります。
window.addEventListener("load",setTest3,false);
これでwindowがロードされてから実行されることになります。記述するときに注意してもらいたいのはイベントにonがつかないという事です。onclickならclickになります。
サンプル
ソース
<script type="text/javascript">
<!--
function setTest3(){
document.getElementById("button3").addEventListener("click",test3,false);
}
function test3(){
document.getElementById("textarea3").value = document.getElementById("text3").value;
}
window.addEventListener("load",setTest3,false);
//-->
</script>
<form>
<input id="text3" type="text" value="codeweb" /><br />
<textarea id="textarea3"></textarea><br />
<input id="button3" type="button" value="クリック" />
</form>
bodyの中からイベントハンドラをなくす(IE)
サンプルはIEじゃないと動きません。
やっぱりIEで動かないと使いものになりません。IEではaddEventListenerの代わりにattachEventを使います。今度はイベントにonがついてるので注意してください。
サンプル
ソース
<script type="text/javascript">
<!--
function setTest4(){
document.getElementById("button4").attachEvent("onclick",test4);
}
function test4(){
document.getElementById("textarea4").value = document.getElementById("text4").value;
}
window.attachEvent("onload",setTest4);
//-->
</script>
<form>
<input id="text4" type="text" value="codeweb" /><br />
<textarea id="textarea4"></textarea><br />
<input id="button4" type="button" value="クリック" />
</form>
結局最後はprototype-js
こうなるとやっぱしクロスブラウザ用の関数を作りたくなるのが人というものです。ではここで専用の関数を作ってみます・・・と言いたい所ですが、わざわざ自分で作らなくても既に世の中には優秀なものが出来ています。
この一連の作業をprototype-jsを使って書くとこうなります。実に簡単でシンプルに出来ます。
Event.observe("button5", "click", test5, false);
ここがイベントハンドラの変わりになっています。button5はオブジェクトのIDですが、ここにはID以外にもwindowのようなオブジェクトを指定することもできます。
ビバ！prototype-js！
サンプル
このブログに載せたら文字コードが違うので動きませんでした。別ページ用意するのがめんどくさいのでソースだけ載せときます。
ソース
<script type="text/javascript" src="/js/prototype-1.4.0.js"></script>
<script type="text/javascript">
<!--
function setTest5(){
Event.observe("button5", "click", test5, false);
}
function test5(){
$("textarea5").value = $F("text5");
}
Event.observe(window, "load", setTest5, false);
//->
</script>
<form>
<input id="text5" type="text" value="codeweb" /><br />
<textarea id="textarea5"></textarea><br />
<input id="button5" type="button" value="クリック" />
</form>
久しぶりに更新したら疲れました。
例によって適当に書いてる所が多々あるので必ずコメント欄にツッコミがないかどうか確認していってください。
関係ないけど、近いうちにダイハツのエッセ買います。
そのまえにニートになりそうだけど…。
