「WEB2.0へ繋がるイベントパンドラのまとめ」とかタイトルにつけてみようかと思ったけど大嘘つきになるのでやめた。
最近HTMLソース内に極力JavaScriptのソースを書かないでプログラムを組むように心がけてるので、ここらで一度自分用にまとめてみようかと思って今回はイベントハンドラ（？）について色々書いてみました。先にオチを言ってしまいますけど、最終的にはprototype-jsのEvent.observe使ってしまいますので内容にあまり期待しないように。
では、「テキストボックスの内容を下のテキストエリアにコピーする」というサンプルを使って長々と無駄に語っていきます。しばらくブログ更新してなかったので文章が変なのは仕様です。
これまでのJavaScript
まず、従来の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の要素が加わる
つぎに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>
後編に続く。
