- 2007-12-19 (水)
- 技術
JavaScriptを使ってアプリケーションを作る場合、ユーザビリティを考えるといろいろなイベントを使うことになると思います。
例えばボタンが押された場合や、画面が表示された場合などなど。
このときに発生したイベントでこんな処理をしたいな～と思ったときに登録するのがイベントハンドラ（関数）です。
<input type="button" onclick="ajaxRequest();"/>
でもこれだとデザインとロジックの分離といった考えから外れて、ちょっとHTML自体が見にくくなってしまう場合があります。
そこで登場するのがJavaScriptからイベントを登録するといった考え方です。
「なんか難しそうだな～」または「面倒だな～」と思われるかもしれませんが、なんてことはありません。
1個のメソッドを呼ぶだけでいいんです。ラクチン！
それがprototype.jsに定義されているEventクラスのobserveメソッドです。
使い方はいたってシンプルで
<script language="JavaScript">
<!--
// こんな感じでイベントを登録できる
// Event.observeはブラウザ毎の登録の違いを吸収してくれるよ
Event.observe(window, 'unload', function(){
alert("a");
});
//-->
</script>
このように
- イベントを追加したいオブジェクト：「window」
- どのイベントに追加するか？：「unload」
- あとイベントハンドラ
を引数で渡すだけです。
上記では無名関数をそのまま入れています。
これで画面のonload時に上記処理を呼び出してで目的のイベントを登録しといたら、なんだかカッチョイイですね！
今まであんまり使ったことはなかったのですが、これから進んで使ってみようと思います。
ちなみにどうしてこのようにわざわざprototype.jsのEvent.observeを使わないといけないかと言うと、ブラウザ毎にイベントを追加するメソッドが違うからです。
Internet Explorerでは
attachEvent, detachEvent
Firefox，Opera，Safariでは
addEventListener, removeEventListener
ほんのちょびっと違いますねｗ
これをEvent.observeが吸収してくれているのです。（なんかいいヤツだな～）
デザインと処理の分離で、見やすいコード＋デザイナーさんに優しい設計をしてみてはいかがでしょうか。
【関連する記事】
- Event.observeでセットするfunction内のthisについて
- jQueryがIEでもローカルファイルにAjaxでアクセスできる理由
- Prototype.jsのチートシート（ver1.5、1.6）
- Newer: IoCコンテナってなあに？
- Older: プロジェクト管理ツールっていっぱいあるな～
Comments:0
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/735
- Listed below are links to weblogs that reference
- prototype.jsのEvent.observeを使ってみる from HouseTect, JavaScripter Blog
