イベントの発火

ちょっとイベントハンドリングがややこしくなってくると、イベントハンドラを呼び出すのではなく、コントロールのイベントを発火したいときがある。Textフィールドのvalueに値を代入した時には、onchangeイベントが動いてくれるといいんだけど、動いてくれないので、自分で動かすしかなさそう。

そんなときに使うのがDOMインタフェースのdispatchEvent、IEならfireEventメソッドです。いちいち判定して使い分けるのは面倒なので、prototype.jsを使ってこんな風にEventを拡張してみました。

Object.extend(Event, {
  dispatchEvent: function(element, event, eventName) {
    var newEvent = new Object();
    for(var prop in event)
      newEvent[prop] = event[prop];
    prop.type = eventName;
    prop.target = element;
    if (element.dispatchEvent) {
      element.dispatchEvent( event );
    } else if (element.fireEvent) {
      element.fireEvent('on' + eventName, event);
    } else {
      throw new Error("element support neither dispatchEvent nor fireEvent method.");
    }
  }
});

使い方はobserveメソッドとかと同じような感じで。

  Event.dispatchEvent( $("hoge"), event, "change");