「WEB2.0へ繋がるイベントパンドラのまとめ」とかタイトルにつけてみようかと思ったけど大嘘つきになるのでやめた。
最近HTMLソース内に極力JavaScriptのソースを書かないでプログラムを組むように心がけてるので、ここらで一度自分用にまとめてみようかと思って今回はイベントハンドラ（？）について色々書いてみました。先にオチを言ってしまいますけど、最終的にはprototype-jsのEvent.observe使ってしまいますので内容にあまり期待しないように。
では、「テキストボックスの内容を下のテキストエリアにコピーする」というサンプルを使って長々と無駄に語っていきます。しばらくブログ更新してなかったので文章が変なのは仕様です。
まず、従来のJavaScriptだとこんな感じです。とくに何も説明する必要もないと思います。
<script type="text/javascript">
<!--
function test1(){
document.form1.textarea1.value = document.form1.text1.value;
}
//-->
</script>
<form name="form1">
<input name="text1" type="text" value="codeweb" />
<textarea name="textarea1"></textarea>
<input type="button" value="クリック" onclick="test1()" />
</form>
つぎにDOMの要素が加わるとこんな感じになります。getElementByIdでオブジェクトを直接指定してやります。この書き方が主流の書き方になってるのではないでしょうか。
<script type="text/javascript">
<!--
function test2(){
document.getElementById("textarea2").value = document.getElementById("text2").value;
}
//-->
</script>
<form>
<input id="text2" type="text" value="codeweb" /><br />
<textarea id="textarea2"></textarea><br />
<input type="button" value="クリック" onclick="test2()" />
</form>
さて、ここからが本題です。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>
サンプルは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を使って書くとこうなります。実に簡単でシンプルに出来ます。
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>
久しぶりに更新したら疲れました。
例によって適当に書いてる所が多々あるので必ずコメント欄にツッコミがないかどうか確認していってください。
関係ないけど、近いうちにダイハツのエッセ買います。
そのまえにニートになりそうだけど…。