AJAXのお勉強

prototype Event.observe＠AJAX

Event.observeにより、イベントをハンドルできます。

Event.observe(エレメント,イベント名,メソッド名,boolean);
bubbling段階：false
capture段階：true

下記では、Event.observeにより、load時に、initメソッドを呼び出します。
initメソッドでは、divタグのイベントに対して、処理を定義します。

divタグに対して、記述したイベントを発生させると、
記述したメソッドが処理されます。


<html>
<head>
<title>Event.observe</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
<!--

    Event.observe(window,"load",init,false);

    function init() {
        Event.observe($("div1"),"click",divClick,false);
        Event.observe($("div1"),"mousemove",divMouseMove,false);
        Event.observe($("div1"),"mouseout",divMouseOut,false);
    }
    
    function divClick() {
        alert("クリックされました");
    }
    
    function divMouseMove(evt) {
        $("msg").innerHTML = "マウスの位置 X:" + Event.pointerX(evt) + "Y:" + Event.pointerY(evt);
    }
    
    function divMouseOut() {
        $("msg").innerHTML = "";
    }

// -->
</script>
</head>
<body>

<div id="div1" style="padding:5px;border-color:#333333;border-width:1px;border-style:solid;width:200px">
クリックでアラーと表示<BR>
マウスフォーカスで、マウスの位置表示
</div>

<div id="msg"></div>
</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.