MÉTODO Observe

El método observe de prototype, como su nombre lo indica, observa el compartamiento de algún elemento o grupo de elemtos del DOM a la espera de algún suceso o evento previamente definido. De esta manera cuando ocurre el evento esperado observe lo detecta y ejecuta una función definida por el usuario.

Veamos un ejemplo

Supongamos que queremos ejecutar una función cuando el usuario hace click en un boton. Si usasemos javascript sería algo así:

<javascript>

    function mi_funcion(){

       alert("Esta es mi función");

   }

</javascript>

<input type="button" value="Ejecutar función" onClick="mi_funcion()" />

De esta forma al clickear (evento onClick) el botón "Ejecutar función" invocamos a la función javascript mi_función.

Ahora veamos el mismo ejemplo utilizando Prototype:

<javascript>

   $('mi_boton').observe('click',function(){

        alert("Esta es mi función");

   });

</javascript>

<input type="button" value="Ejecutar función" id="mi_boton" />

Vea que cuando definimos el botón no incluimos el evento onClick, en su lugar definimos una ID para el botón. Ahora desde javascript utilizamos la función $ para "atrapar" nuestro botón y le agregamos el método observe, indicando que "observe" a nuestro botón a la espera del evento "click". Cuando el evento sucede observe ejecuta la función que hemos definido.

Vea que que en javascript utilizamos el evento Onclick mientras que en Prototype lo denominamos simplemente click. En general todos los eventos de javascript son referenciados en Prototype sin el on y en minúsculas. 

Evento javascript            Referencia en Prototype

onClick                              click

onFocus                             focus

onBlur                                blur

onChange                           change

onSubmit                           submit

Ahora, si queremos observar por ejemplo una caja de texto con id="caja1" y ejecutar una función cuando esta reciba foco, podemos definir el siguiente código Prototype:

$('caja1').observe('focus',function(){

       cuerpor de la función

});