2006年01月23日

[JavaScript]DOMっぽいイベントハンドラ、結局最後はprototype-js(前編)

「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>

後編に続く。

posted by 高速内弁慶 at 12:35| Comment(0) | TrackBack(1) | JavaScript | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/12114283

この記事へのトラックバック

getElementById
Excerpt: 【Spry,prototype.js】ドル関数を比較する CLEVER BBSのスキン改良<投稿及び検索フォームの表示/非表示ボタン設置> 【YUI,prototype.js】YUIのドル関数的メソッ..
Weblog: getElementById
Tracked: 2006-08-18 18:05
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。