今日のお題は、JavaScript を使ってウェブページを作る人なら誰でも知っておきたい、だけど意外と知られていないことです。
これは、多くの JavaScript 上級者が活用している秘密のテクニックでもあります。
ちょっと、大げさでしょうか。。。（汗）
でも、ともかく、知っていたら便利なので、知らなかった方はぜひ覚えて行ってくださいね。
どういうときに使うの？
これは、JavaScript でイベントを設定するときに使います。
（厳密に言うと、イベントを設定、というより、「イベントリスナーの設定」 ですが、ここでは深入りせずイベントを設定という風に書きます）
初級の本では、よく、
<input type="button" onclick="func1()" value="OK">
とか
<div onmouseover="mouse_over()" onmouseout="mouse_out()"> ・・・ </div>
などと、書いていますよね？
こういう書き方を置き換えるものです。
じゃぁ、どう書けばいいの？
例を挙げます。
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript">
function p1_onclick(evt){
alert('hello');
}
</script>
</head>
<body>
<p id="p1" onclick="p1_onclick()">ここをクリック</p>
</body>
</html>
と書きたくなったら、次のように書きましょう。
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', window_onload);
function window_onload(evt){
Event.observe('p1', 'click', p1_onclick);
}
function p1_onclick(evt){
alert('hello');
}
</script>
</head>
<body>
<p id="p1">ここをクリック</p>
</body>
</html>
赤字でマークしたところが追加されたところ、青のところが変更点です。
Event.observe というので、イベントを設定しています。
第一引数： イベントを設定する HTML 要素の ID (またはオブジェクト)
第二引数： イベントの種類 ('click', 'mouseover', 'load', ... )
第三引数： イベント発生時に呼び出されるファンクション。
書かなければいけないコードが増えていますが、こう書いておくほうが良いです。詳しい理由は別の機会に書きたいと思いますが、まずはこのように書くのに慣れてください。
<p id="p1" onmouseover="...">
だったら、
Event.observe( 'p1', 'mouseover', p1_onmouseover );
のようにします。
ここで使っている、prototype.js は次のサイトからダウンロードしてきて、HTML と同じディレクトリに保存しておけば OK です。
Prototype JavaScript framework
このブログで紹介するコードは、今後もおそらくこの方式で書きます。
尚、prototype のバージョン 1.6 以降では
$('p1').observe('click', p1_onclick);
とも書けますが、私は window にこの書き方が適用できず、一貫性がなくなるのが嫌で使っていません。
その他に、具体例はこちらにありますので、参考にしてください。