DOM Using setXY

Ajax YUI DOM

YUI DOMのExampleのページのサンプリングを開始。
開いてみると、setXYとか、さっきサンプリングしたものばかり。
慣れるためにもう1回やってみることにする。

サンプルは、クリックイベントの位置に矩形が飛んでくるという代物。

HPで紹介されているコードだと動かない。以下がサンプルコード。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Ajax_Sampling</TITLE>
<!-- #style で　id=fooの全ての要素に適用する。 -->
<style type="text/css"> 
#foo {
    background-color:#00f;
    height:10px;
    width:10px;
}
</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/dom/dom-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/event/event-min.js" >
</script> 

<script type="text/javascript">

init = function() {

    var move = function(e) {
        //EventオブジェクトのgetXYでイベントの発生位置を取得する。
        YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e));
    };

    //YAHOO.util.Event.on はaddListnerのエイリアス 
    //（EventのAPIドキュメントより。）
    //documentオブジェクトにclick eventで発火するmoveを仕込む。
    //（注） moveはclickイベントのリスナに登録されるので、それを明示的に外すまでは
    //リスナに登録されっぱなしになる。
    YAHOO.util.Event.on(document, 'click', move);	

}
</script>
</HEAD>

<BODY onload=init()>
<p>
画面のどこかでクリックしてください。
</p>

<div id="foo"></div>

</BODY>
</HTML>

サンプルの画面は以下のようになる。