Abstract.EventObserverクラス

prototype.js解読 
【抜粋】一部省略
Abstract.EventObserver = function() {}
Abstract.EventObserver.prototype = {
  initialize: function(element, callback) {
(省略)
  },
(省略)
  registerCallback: function(element) {
(省略)
  }
}

名前の通り抽象クラスです。継承することで、入力要素におけるonClickまたはonChangedイベント時に、指定した関数を実行させるサブクラスを作成することができます。具体的には以下。

タグ type イベント
input checkbox
radio		 onClick
input password
text		 onChange
textarea
select		 - onChange

サブクラスでは、監視する値を返却するgetValueメソッドを実装する必要があります。

後述Form.Element.EventObserverクラス、Form.EventObserverクラスで継承しています。プログラマがサブクラスを作ることもできますが、Abstract.TimedObserverクラスとは違い、機能がかなり限定的なこともあり、その機会はあまりない気がします。なので、例はここでは提示しません(Form.EventObserverクラスを参照してください)。

initializeメソッド

【抜粋】
  initialize: function(element, callback) {
    this.element  = $(element);
    this.callback = callback;

    this.lastValue = this.getValue();
    if (this.element.tagName.toLowerCase() == 'form')
      this.registerFormCallbacks();
    else
      this.registerCallback(this.element);
  },

引数elementは監視する要素(ID指定可)、引数callbackは監視する値が変化した際に実行する関数が指定されます。callback関数には実行時に監視要素と現在値が引数として渡されます。

監視対象の現在値を、サブクラスで実装するgetValueメソッドで取得して、lastValueプロパティに格納するのはAbstract.TimedObserverクラスと同じです。

その後、監視対象がformであればregisterFormCallbacksメソッドを、form以外であればregisterCallbackメソッドを呼び出しています。

onElementEventメソッド

【抜粋】
  onElementEvent: function() {
    var value = this.getValue();
    if (this.lastValue != value) {
      this.callback(this.element, value);
      this.lastValue = value;
    }
  },

Abstract.TimedObserver.onTimerEventメソッドと同じ。監視対象の現在値を、サブクラスで実装するgetValueメソッドで取得して、lastValueプロパティと比較します。変化があったら、callbackプロパティに登録された関数を、elementプロパティと現在値を引数にして呼び出します。その後、lastValueプロパティに現在値を格納します。

前述したように、このままだと値が配列の場合に不具合が発生するのですが、現実的にはまず問題になりません。selectタグのイベントがonchageのためです＾＾； いちおう、改修案は「Abstract.TimedObserver.onTimerEventメソッド改修検討 - Backstage of theater.js」を参照してください。

registerFormCallbacksメソッド

【抜粋】
  registerFormCallbacks: function() {
    var elements = Form.getElements(this.element);
    for (var i = 0; i < elements.length; i++)
      this.registerCallback(elements[i]);
  },

前述initializeメソッドで、監視対象がformの場合に呼び出されるメソッド。対象formの入力要素すべてを次のregisterCallbackメソッドで処理しています。

registerCallbackメソッド

【抜粋】
  registerCallback: function(element) {
    if (element.type) {
      switch (element.type.toLowerCase()) {
        case 'checkbox':
        case 'radio':
          Event.observe(element, 'click', this.onElementEvent.bind(this));
          break;
        case 'password':
        case 'text':
        case 'textarea':
        case 'select-one':
        case 'select-multiple':
          Event.observe(element, 'change', this.onElementEvent.bind(this));
          break;
      }
    }
  }

後述Event.observeメソッドは、要素のイベントに関数を登録するメソッドです。これにより引数の要素のonClickまたはonChangeイベントにonElementEventメソッドを登録しています。要素のtypeプロパティにより、登録先のイベントを振り分けています。