Tips: イベント関連

イベントハンドラをまとめる

あるコンポーネントにイベントを設定すれば、そのイベントを取得したのは、そのコンポーネントでしかあり得ないわけだから、イベントの取得主を意識する必要はあまりない。

だけど、例えば、複数のButtonに対して、似たような処理を行う場合は、それぞれ別のイベントハンドラ関数を設定するのでは無くて、イベントハンドラ関数内で、どのコンポーネントがイベントを取得したのかを評価し、処理を振り分けるというようなことをやる場合もあるだろう。

その際に、自分はいままでevent.targetプロパティを使って評価していたのだが、event.currentTargetプロパティを使用しないと不適切な場合があるということが、わかった。(上のケースでも厳密にはevent.currentTargetで評価すべき)

詳細は、ここのイベントの伝播の解説を読んでください。

自分的には、

event.target - イベントを最初に受け取ったひと
event.currentTarget - イベントを処理することになってるひと

と解釈するのがしっくりきた。ま、厳密には違うような気もする(笑)。

で、このevent.targetとevent.currentTargetをうまく使い分けると、イベントハンドラを減らすことができ、メモリの節約と実行速度の向上が見込めるのだ。

具体的には、該当するコンポーネントの親のコンポーネントにイベントを設定すれば、子のコンポーネントはそのイベントを認識するので、イベントハンドラ内で、event.targetを使って、どのコンポーネントがイベントを拾ったかを評価すればいいのだ。以下がそのサンプル。

eventTest.mxml:

  <?xml version="1.0" encoding="utf-8"?>
  <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
      <![CDATA[
        private function cCanvas1_clickHandler(event:MouseEvent):void {
            trace(event.currentTarget.id, event.target.id);
        }
      ]]>
    </mx:Script>
    <mx:Canvas id="cCanvas1" width="100%" height="100%" click="cCanvas1_clickHandler(event)">
      <mx:Button id="bButton1" x="10" y="10" label="Btn1"/>
      <mx:Button id="bButton2" x="10" y="40" label="Btn2"/>
      <mx:Button id="bButton3" x="10" y="70" label="Btn3"/>
    </mx:Canvas>
  </mx:WindowedApplication>

で、世の中で簡単に見つかる大手サイトのFlex/AIR関連のチュートリアルで、この辺りのことをちゃんと解説してあるものは皆無のような気がするんだけど、これを理解しておくことは結構重要じゃないかと思うんだよね。