Form.EventObserverクラス

prototype.js解読 
【抜粋】
Form.EventObserver = Class.create();
Form.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), {
  getValue: function() {
    return Form.serialize(this.element);
  }
});

前述Abstract.EventObserverクラスを継承しています。指定フォームがもつ入力要素すべてのイベント発生時(onClickまたはonChange)、フォームの入力内容に変化があった場合に、指定関数を実行させるためのクラスです。

getValueメソッド

前述Abstract.EventObserverクラスを継承する場合に必要なメソッド。対象フォーム(elementプロパティ)がもつ入力要素すべての値を、前述Form.serializeメソッドにより文字列として取得し、返却しています。

【例】
<html>
<head>
<title></title>
<script language="javascript" src="prototype.js" charset="utf-8"></script>
<script>
function init(){
  new Form.Element.EventObserver(document.FORMNAME.TEXT, func1);
  new Form.Element.EventObserver(document.FORMNAME.CHECK, func1);
  new Form.Element.EventObserver(document.FORMNAME.SELECT, func1);
  new Form.EventObserver(document.FORMNAME, func2);
}
function func1(element, value){
  Element.update('test1', element.name + " cahnged to " + value);
}
function func2(element, value){
  Element.update('test2', element.name + " cahnged to " + value);
}
</script>
</head>
<body onload="init();">
<form name="FORMNAME" onsubmit="return false;">
<input type="text" name="TEXT" value="テキストボックス"/>
<input type="checkbox" name="CHECK" value="CHEKED" checked/>
<select size="3" name="SELECT" multiple>
  <option value="OPTION1">オプション１</option>
  <option value="OPTION2">オプション２</option>
  <option value="OPTION3" selected>オプション３</option>
  <option value="OPTION4">オプション４</option>
</select>
</form>
<div id="test1">element</div>
<div id="test2">form</div>
</body>
</html>

入力要素の内容を変更すると、表示メッセージが変わります。

注意点として、テキストボックス等のテキスト入力要素は、カーソルが要素から外れるまでonChangeイベントを発生させません。入力をリアルタイムに監視したい場合は、前述Form.Element.Observer、Form.Observerクラスを使うか、Abstract.EventObserverクラスのregisterCallbackメソッドを改造する必要があります*1。

selectタグにmultiple指定をしても、(コード上問題があっても)特に問題が起こらないのは前述したとおりです。

複数の同名要素を監視するのは更に工夫が必要なため、ここでは触れてません＾＾； 整理できたら追記しようと思います。

*1:onCahngeイベント以外に、onKeyup等を追加する。詳細は省略＾＾；