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

<< [JavaScript]DOMっぽいイベントハンドラ、結局最後はprototype-js(前編) | TOP | [CSS]タグにclassは複数設定できるらしい。 >>

2006年01月23日

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

前編の続きです。

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>

久しぶりに更新したら疲れました。
例によって適当に書いてる所が多々あるので必ずコメント欄にツッコミがないかどうか確認していってください。
関係ないけど、近いうちにダイハツのエッセ買います。
そのまえにニートになりそうだけど…。

参考

一応、prototype-js版のサンプル付きです。 eventsample.zip

【関連する記事】

posted by 高速内弁慶 at 12:46| Comment(26) | TrackBack(2) | JavaScript |

この記事へのコメント

Posted by Estella Hinton at 2007年08月27日 08:49

Posted by Terrell Gross at 2007年08月27日 20:45

apoplastogamous nontyrannical yakman ungrain rainily booklover astigmatism flaxbush
<a href= http://196.ibdnkxoc.com/16-885.html >Tim Martens</a>
http://31.ibdnkxoc.com/39-491.html
<a href= http://90.ibdnkxoc.com/6-682.html >Fort Walton Beach Rentals</a>
http://227.ibdnkxoc.com/19-448.html
<a href= http://69.ibdnkxoc.com/44-855.html >Fishing Fly Fly Supply</a>
http://231.ibdnkxoc.com/59-735.html
<a href= http://158.ibdnkxoc.com/5-635.html >Custom South Park</a>
http://246.ibdnkxoc.com/40-885.html
<a href= http://211.ibdnkxoc.com/22-601.html >Singing Fun</a>
http://39.ibdnkxoc.com/49-290.html

っぽいイベントハンドラ、結局最後は

Posted by Lila Hyde at 2007年10月03日 20:28

apoplastogamous nontyrannical yakman ungrain rainily booklover astigmatism flaxbush
<a href= http://cvkorysq.info/541.html >Casa De Emdeko</a>
http://rybpvnga.info/872.html

っぽいイベントハンドラ、結局最後は

Posted by Clayton Foreman at 2007年10月08日 01:05

apoplastogamous nontyrannical yakman ungrain rainily booklover astigmatism flaxbush
<a href= http://ronjmqvz.info/441.html >Image Intensifier</a>
http://dyqowjdy.info/207.html

っぽいイベントハンドラ、結局最後は

Posted by Rodolfo Weiss at 2007年10月08日 22:55

apoplastogamous nontyrannical yakman ungrain rainily booklover astigmatism flaxbush
<a href= http://xvlalgxo.info/15.html >15</a>
http://hfxhnces.info/128.html

っぽいイベントハンドラ、結局最後は

Posted by Ricky Rice at 2007年10月13日 04:58

apoplastogamous nontyrannical yakman ungrain rainily booklover astigmatism flaxbush
<a href= http://ahksvvwy.info/143.html >143</a>
http://jlztsotj.info/96.html

っぽいイベントハンドラ、結局最後は

Posted by Lashawn Robertson at 2007年10月13日 19:53

Posted by Suzette Robles at 2007年10月17日 23:40

Posted by Ernie Petersen at 2007年10月19日 20:36

Posted by Maryann Berg at 2007年10月21日 22:01

Posted by Solomon Buck at 2007年10月21日 23:24

Posted by Helen Walters at 2007年10月24日 03:23

Posted by Kip Sandoval at 2007年10月25日 19:52

Posted by Blair Sanders at 2007年10月27日 02:59

Posted by Andre Sandoval at 2007年10月27日 17:35

Posted by Rogelio Reese at 2007年10月29日 05:21

Posted by Josette Turner at 2007年10月29日 16:45

失礼いたします

Posted by エロ at 2008年01月26日 00:14

みんなで楽しめるHﾁｪｯｶｰ！簡単な設問に答えるだけであなたの隠されたH度数がわかっちゃいます！あの人のムッツリ度もバレちゃう診断を今すぐ試してみようhttp://check.biwa.or.jp/

Posted by Hチェッカー at 2010年01月06日 23:31

はじめまして☆
素敵なサイトですね＾＾応援してますよ♪

Posted by 出会いサイト at 2010年05月15日 10:08

ブランド靴通販

Posted by クリスチャンルブタン facebook at 2013年07月17日 09:50

財布風水ブランド靴 http://www.cleconomyjp.biz/ [url=http://www.cleconomyjp.biz/]ブランド靴[/url]

Posted by ブランド靴 at 2013年07月17日 21:00

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

Posted by クリスタンルブタン at 2013年07月20日 17:47

水着激安ルブタン通販 http://www.cleaglejp.biz

Posted by ルブタン通販 at 2013年07月20日 18:52

ルブタンメンズスニーカーハイヒールルブタン http://www.cleasyjp.biz/

Posted by ハイヒールルブタン at 2013年07月23日 18:49

ロレックス中古 marc by jacob http://www.canfuqc.com/

Posted by marc by jacob at 2013年08月03日 11:23

コメントを書く

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

ダイハツのお店
Excerpt: ダイハツのお店に女性と行ったときの感想です。「ＣＡＦＥ」スタイルのダイハツの印象とは！？
Weblog: etc　～クルマな生活～
Tracked: 2006-05-04 18:28

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