CustomEvent.subscribeの使い方 - YahooUserInterfaceのEvent処理

JavaScript

Yahoo.util.CustomEventの扱い方が分かったのでメモしておく

JavaScriptでイベントハンドラを定義するとき、thisキーワードに注意する必要がある。ハンドラ内でthisキーワードを使ってハンドラを定義した場合、ハンドラを実行したときの実行元が異なるため、thisキーワードが挿しているものが異なってしまう問題がある。

この件についてはJavaScriptのthisキーワードをちゃんと理解するという記事を参考に。

YahooUserInterfaceでイベントを扱う場合も同じ問題が起こる

YahooUserInterfaceにおけるイベントはYahoo.util.CustomEventで定義されている。CustomEventではイベントに対してハンドラを登録するためのsubscribeメソッドが用意されている。subscribeメソッドは上にあげた問題を解決できるように設計されている。


CustomEvent.subscribeのAPI

subscribe
void subscribe ( fn , obj , override ) 

  Subscribes the caller to this event 

Parameters: 
  fn <Function> The function to execute 
  obj <Object> An object to be passed along when the event fires 
  override <boolean|Object> If true, the obj passed in becomes the execution scope of the listener. if an object, that object becomes the the execution scope.
 
Returns: void


fnではイベントハンドラを指定する。objでイベントの実行元を指定できる。overrideをtrueにすることで、スコープをobjで指定したオブジェクトにすることができる。実行元を変えなくていいのであれば、第二引数、第三引数はわざわざ指定しなくてもいいが、スコープを変えたければ、第二引数と第三引数を利用すると便利である。

参考

CustomEvent API

追記

このイベントに対するスコープの扱いは、良く使われるYahoo.util.Event.on()も同じらしい。Yahoo.util.Event.addListener(Yahoo.util.Event.onも同じ)のAPIはこんな風になっている

static Boolean addListener ( el , sType , fn , obj , override )