prototype.js:イベント

●イベント

HTML のボタンを押したときに JavaScript を走らせたい場合、
たとえば、
  <script type="text/javascript">
  <!--
    function subFunc() {
      alert('pushed!');
    }
  // -->
  </script>
  <input type="button" value="ボタン" onClick="subFunc()">
などとします。

ただ、この書き方だと、
イベント処理を追加するたびに、
JavaScript と HTML の両方を書き換えなければなりませんし、
状態によって処理を切り替えたいときにも不便です。

prototype.js の observe を使えば、
簡単に処理できるようになります。
上記の例で言うと、
  <script type="text/javascript">
  <!--
    window.onload = function(){
      $("btn1").observe("click", function(){alert('pushed!')});
    }
  // -->
  </script>
  <input type="button" value="ボタン" id="btn1">
となります。
中身を解説します。
window.onload は、HTML の読み込み完了時に呼ばれます。
この場合だと、observe の入っている関数が呼ばれます。

$("btn1") は、ボタンの ID なので、
observe は、ボタンが "click" された時に、
alert の入っている関数を実行します。

"click" の部分は、
onChange イベントを見たければ "change" に、
onFocus なら "focus" に、
などと変えることができます。

JavaScript と HTML が分離できている事も重要です。