prototypeでEvent.observeのテスト


Event.observeは主にオブジェクトバインドイベントについて、公式の説明を見てみましょう.

  
  
  
  
  1. Event.observe(element, eventName, handler)  
  2.  
  3. Registers an event handler on a DOM element. 

例をみる

  
  
  
  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5.         <title>Untitled Document</title> 
  6.         <script src="prototype.js"> 
  7.         </script> 
  8.     </head> 
  9.     <body> 
  10.         <input type="button" id="btn" value=" " /> 
  11.         <input type="button" id="reg" value=" " /> 
  12.         <input type="button" id="unreg" value=" " /> 
  13.         <div id="status"> 
  14.         </div> 
  15.         <script> 
  16.             function test(){  
  17.                 alert(" ");  
  18.             }  
  19.               
  20.             Event.observe("reg", "click", function(){  
  21.                 Event.observe("btn", "click", test, false);  
  22.                 $("status").innerHTML = " ";  
  23.             }, false);  
  24.             Event.observe("unreg", "click", function(){  
  25.                 Event.stopObserving("btn", "click", test, false);  
  26.                 $("status").innerHTML = " ";  
  27.             }, false);  
  28.         </script> 
  29.     </body> 
  30. </html> 

useCaptureパラメータを設定して、リスナーがキャプチャフェーズ、ターゲットフェーズ、またはバブルフェーズで実行されるかを決定します.(1)useCaptureがtrueに設定されている場合、リスナーはターゲットまたはバブルフェーズでイベントを処理するのではなく、キャプチャフェーズでのみイベントを処理します.(2)useCaptureがfalseの場合、リスナーはターゲットまたはバブルの段階でのみイベントを処理する.
以上の例では、ボタンにイベントをバインドし、クリックイベントを持たせ、分からないところにメッセージを残します.