This Is A FineDay

( 十一 ).Prototype （ 1.5 rc2) 使用指南之 form

这一部分提供了很多与表单操作有关的功能，包括以下部分，当通过 $ 方法返回元素时，可以直接通过 $(element).method() 调用：

Form 对象：提供了操作整个表单的一些方法
Form.Element 对象：提供了操作某个表单元素的方法
TimedObserver 类：周期性表单监视器，当表单元素值改变的时候执行一个回调函数，有 Form 和 Element 两种类型
EventObserver 类：利用事件来监视表单元素，当表单元素值改变的时候执行一个回调函数，有 Form 和 Element 两种类型

Form 对象：

reset(form) ： form.reset()
serializeElements(elements) ：将 elements 中的元素序列化，就是返回指定的所有元素的 queryString 的形式，便于在 xmlhttp 或其他地方使用
serialize(form) ：序列化整个表单
getElements(form) ：返回表单的所有可序列化元素
getInputs(form, typeName, name) ：返回所有符合 typeName 和 name 的 input 元素
disable(form) ：使整个表单处于不可用状态
enable(form) ：是整个表单可用
findFirstElement(form) ：返回类型为 'input’, ’select’, 'textarea’ 的第一个可用的非隐藏元素
focusFirstElement(form) ：使 findFirstElement(form) 返回的元素得到焦点

Form.Element 对象：

focus(element) select(element) ： html 元素内置方法的封装，除了返回元素本身
serialize(element) ：序列化指定的表单元素，返回 key=value 的形式，返回的 string 已经 encodeURIComponent 了
getValue(element) ：返回元素的值
clear(element) ：清除元素的值
present(element) ：判断元素的值是否非空
activate(element) ：使元素获得焦点
disable(element) ：使元素不可用
enable(element) ：是元素可用

$F = Form.Element.getValue 方便使用

Form.Element.Observer 以及 Form.Observer 类：

周期性监视表单元素，如果表单或表单元素的值有改变时，执行执行一个回调函数，使用方式如下：

var oser=new Form.Element.Observer(element, frequency, callback)
or oser=new Form.Observer(form, frequency, callback)
callback 可以定义两个参数 form/element 、 Form.serialize()/value

Form.Element.EventObserver 和 Form.EventObserver 类：

这两个类跟上面的差不多，只是不是周期性的监视，而是利用元素的 change 或 click 事件来监视表单元素的变化，当发生变化时执行 callback ，参数跟上面一样

 

( 十二 ).Prototype （ 1.5 rc2) 使用指南之 event.js

在介绍 Prototype 中 Event 对象前先介绍一下浏览器中的事件模型，浏览器中的事件主要有 HTML 事件、鼠标事件和键盘事件，前两种事件比较好理解，这里主要解释一下键盘事件以及它在 IE 和 firefox 中的区别

键盘事件包括 keydown 、 kepress 和 keyup 三种，每次敲击键盘都会 ( 依次？ ) 触发这三种事件，其中 keydown 和 keyup 是比较低级的接近于硬件的事件，通俗的理解是这两个事件可以捕获到你敲击了键盘中某个键；而 keypress 是相对于字符层面的较为高级点的事件，这个事件能够捕捉到你键入了哪个字符。可以这样理解，如果你敲击了 A 键， keydown 和 keyup 事件只是知道你敲击了 A 键，它并不知道你敲的是大写的 A( 你同时按下了 Shift 键 ) 还是敲的是小写 a ，它是以 " 键 " 为单位，你敲入了大写的 A ，它只是当成你敲下了 shift 和 A 两个键而已，但是 keypress 可以捕捉到你是敲入的大写的 A 还是小写的 a

还要理解一个概念是键盘中的键分为字符 ( 可打印 ) 键和功能键 ( 不可打印 ) ，功能键包括 Backspace, Enter, Escape, the arrow keys, Page Up, Page Down, and F1 through F12 等

下面说一下键盘事件的具体使用方法，

键盘事件的 event 对象中包含一个 keyCode 属性， IE 中只有这一个属性，当为 keydown 和 keyup 事件是， keycode 属性表示你具体按下的键 ( 也称为 virtual keycode) ，当捕捉的是 keypress 事件时 keyCode 属性指的是你键入的字符 (character code)

在 firefox 中情况有些不同， event 对象包含一个 keyCode 属性和一个 charCode 属性， keydown 和 keyup 事件的时候， keyCode 表示的就是你具体按的键， charCode 为 0 ；当捕捉的是 keypress 事件时， keyCode 为 0 ， charCode 指的是你按下的字符

当捕捉的是 keypress 事件时， 当你按的是可打印字符时， keyCode 为 0 ， charCode 指的是你按下的字符的键值，当你按的是不可打印字符时， keyCode 为按下的键的键值， charCode 为 0

注意：功能键不会触发 keypress 事件，因为 keypress 对应的就是可打印的字符，但是有一点 IE 和 FF 中的区别，你按下一个字符键的同时按下 alt 键，在 IE 中不触发 keypress 事件，但是在 ff 中可触发，我发现在 IE 中按下 ctrl 键的时候只有按下 q 键会触发事件其他的要么不会触发事件，要么被浏览器 IE 自身捕获了，例如你按下 ctrl_A ，全选某个东西，你按 ctrl_S 保存文件，但是在 FF 中就 好多了，事件都是先传递到网页，再向外传递

鉴于 IE 和 FF 中的区别，如果你比较懒的话，建议只使用 keydow 和 keyup 事件，这两种事件的使用在 IE 和 FF 中基本上没有区别，也不要捕获 ctrl_A 等被浏览器定义为快捷键的事件

键盘事件 event 对象还有三个其他的属性 altKey, ctrlKey, and shiftKey 来判断你按下一个键的时候是否按下了 alt 等键，这三个属性使用比较简单，三种事件都可以使用，也不存在 ie 和 ff 的兼容性问题

在 Prototype 中的 Event 中又如下属性：

  KEY_BACKSPACE: 8,
  KEY_TAB:       9,
  KEY_RETURN:   13,
  KEY_ESC:      27,
  KEY_LEFT:     37,
  KEY_UP:       38,
  KEY_RIGHT:    39,
  KEY_DOWN:     40,
  KEY_DELETE:   46,
  KEY_HOME:     36,
  KEY_END:      35,
  KEY_PAGEUP:   33,
  KEY_PAGEDOWN: 34,

以及下面的方法：

element(event) ：返回触发事件的元素
isLeftClick(event) ：判断是否按下的左键
pointerX(event) ：事件触发时鼠标的横坐标，对于非鼠标事件，在 ff 中没有此信息，但在 ie 中有？
pointerY(event) ：事件触发时鼠标所在位置的纵坐标
stop(event) ：阻止事件向上传播和浏览器的默认处理方法
findElement(event, tagName) ：找到触发事件的元素的所有祖先元素中的 tagName 为 tagName 的一个元素
observe(element, name, observer, useCapture) ：注册事件处理函数
stopObserving(element, name, observer, useCapture) ：撤销注册的事件