【Javascript】YUI アニメーション-簡単なEvent2

YUI アニメーション-簡単なEvent2

---

1: addListener(イベントを追加する)
2: 複数要素へまとめてイベントをセットする
3: removeListener(イベントを除去する)
4: purgeElement(イベントをまとめて除去する)

前回に引き続き、YUIが用意したイベントの中から、 アニメーション時に便利なイベント追加メソッドaddListenerを使ってみます。 これは、JavaScriptのonclickやonmouseoverなどの一般的なイベントをクロスブラウザに追加することができるので便利です。

addListener(イベントを追加する)

以前に、「クロスブラウザを制する」シリーズの記事で、 イベント開始 startEventや イベント停止 stopEventなどのクロスブラウザ関数を作ってみましたが、 YUIにも、addListenerというイベント追加メソッドが用意されています。

いわゆる、IE以外のブラウザに実装されたDOMのaddEventListenerやIE独自のattachEventに相当する機能をクロスブラウザ化したものです。

addListenerは、YUIのevent.js(あるいはevent-min.jsなど)の中に書かれた、 YAHOO.util.Eventクラスの静的なメソッド(newでインスタンス化しなくても使えます)として提供されており、もっともシンプルな使用方法は、次のような書き方になります。

YAHOO.util.Event.addListener("要素のid名"またはobject,"click",callbackFunc);

この書き方で、イベントをセットしたい対象要素の「id名」または「object」、イベントタイプの"on"を取った名前(たとえば「onclick」なら「click」)、「イベント時に起動する関数名」を引数で渡すことで指定することができます。(Yahoo! UI Library > event > YAHOO.util.Event > addListener)

では、簡単なサンプルを見てみます。前回のような Formボタンではなく、DIVエリアをクリックすると透明化フェイドアウトします。



このコードは次の通りです。

<script type="text/javascript"
        src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" 
        src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" 
        src="../../build/event/event-min.js"></script>
<script type="text/javascript" 
        src="../../build/dom/dom-min.js"></script>

<script type="text/javascript">

function fnCallback1(){
    var myAnim = new YAHOO.util.Anim(
      this , { opacity : { from:1,to:0 } } ,0.8
    );
    myAnim.animate();
}

YAHOO.util.Event.addListener("test1", "click", fnCallback1);

</script>

<style>
#test1{ width:15em;height:120px;background-color:#888;padding:4px}
</style>

<div id="test1">
<span>
クリックでフェイドアウトします
</span>
</div>

つまり、前回 のようにForm内のボタンにonclickをセットするのではなく、DIV要素「test1」に直接、 スクリプトからclickイベントをセットしているわけです。

あらためて、このoj.addListener(第一引数,第二引数,第三引数)の引数を整理すると次のようになります。

• 第一引数は、イベントをセットしたい対象要素の「id名」または「object」です
• 第二引数は、イベントタイプで、keydownやmouseoverなどのイベントタイプ名です
• 第三引数は、このイベントで動作する関数です
• 第四引数はオプションで、上記関数の引数オブジェクトです。
• 第五引数はオプションで、上記で渡された渡された引数オブジェクトをカレントスコープにするならtrue。

ちなみに、YAHOO.util.Anim()の第一引数を"test1"などのID名やオブジェクトではなく、「this」にしてありますが、これは、addListenerの第三引数で渡された 関数(fnCallback1)内のスコープがデフォルトでは、自動的にaddListenerの第一引数で渡された対象要素になっているためです。

( *上記thisの代わりに、ID名「'test1'」あるいは、「document.getElementBy('test1')」や、YUIが用意した「YAHOO.util.Dom.get('test1')」などを使うこともできます。)

参考までに、第四引数でオブジェクトを渡し、スコープの書き換えを行ってみます。

<style>
#test2{ width:15em;height:120px;background-color:#ffee44;padding:4px}
#test3{ width:15em;height:120px;background-color:#84ff4c;padding:4px}
</style>

<div id="test2"><span>test2 フェイドアウトします</span></div>
<div id="test3"><span>test3 フェイドアウトします</span></div>

<script type="text/javascript">

//第四引数を第三引数で渡す関数の引数として渡す
function fnCallback2(e,oj){
    alert("oj.testは、"+oj.test)
    var myAnim = new YAHOO.util.Anim(
      this , { opacity : { from:1,to:0 } } ,0.8
    );
    myAnim.animate();
}
YAHOO.util.Event.addListener("test2","click",fnCallback2,{test:123});

//第四引数を第三引数で渡す関数のカレントスコープ(this)にする
function fnCallback3(){
    alert("thisで動作します?n this.testは、"+this.test)
    var myAnim = new YAHOO.util.Anim(
      YAHOO.util.Dom.get('test3') , { opacity : { from:1,to:0 } } ,0.8
    );
    myAnim.animate();
}
YAHOO.util.Event.addListener("test3","click",fnCallback3,{test:123},true);
</script>

次は、複数DOM要素へまとめてイベントをセットするテクニックです。 次ページ