prototype.jsのイベント

prototype.jsで、エレメントにイベントを設定する

<div id="test">test</div>

このタグにクリックイベントを付ける時は

$('test').observe('click', function(event){
  alert('testをクリック');
});

prototype.jsのイベントとして指定出来るイベント

  • ページのイベント
    • load
      ページが読み込まれた時
    • dom:loaded
      ページが読み込まれた時(イメージなどは読み込み完了していなくても発動)
      ※DOMツリーの構築が終わっていても描画が終わっていない場合があるので、このイベント内で$('test’).style.height のようなプロパティを見ても0やnullが入っている場合がある。
    • unload
      ページが閉じられる時
    • resize
      ページのサイズが変更された時
    • abort
      ページの読み込みが中止された時
    • error
      エラーが発生した時
  • マウスのイベント
    • mouseover
      ある領域上にマウス・カーソルが移動された時
    • mouseout
      ある領域上からマウス・カーソルが移動された時
    • mousedown
      マウス・ボタンが押された時
    • mouseup
      マウス・ボタンが解放された時
    • mousemove
      マウス・カーソルが移動された時
    • click
      マウスがクリックされた時
    • dblclick
      マウスがダブルクリックされた時
  • キーのイベント
    • keydown
      キーボードのキーが押された時
    • keypress
      キーボードのキーが押されている時
    • keyup
      キーボードのキーが解放された時
  • 選択イベント
    • focus
      ある領域が選択された時
    • blur
      ある領域の選択が解除された時
    • select
      入力領域の文字列が選択された時
  • 変更イベント
    • change
      フォームの値が変更された時
  • 命令イベント
    • submit
      submit（送信）命令が出された時
    • reset
      reset（初期化）命令が出された時

dom:loadedについての検証をしているページ

http://hisasann.com/housetect/2008/11/prototypejsdomloadedie.html

AJAX

Posted by GENDOSU