(十一).Prototype1.5 rc2)使用指南之form

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

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

Form对象:

reset(form)form.reset()
serializeElements(elements)
:将elements中的元素序列化,就是返回指定的所有元素的queryString的形式,便于在xmlhttp或其他地方使用

serialize(form):序列化整个表单
getElements(form):返回表单的所有可序列化元素
getInputs(form, typeName, name):返回所有符合typeNamenameinput元素
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/elementForm.serialize()/value

Form.Element.EventObserverForm.EventObserver类:

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

 

(十二).Prototype1.5 rc2)使用指南之event.js

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

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

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

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

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

firefox中情况有些不同,event对象包含一个keyCode属性和一个charCode属性,keydownkeyup事件的时候,keyCode表示的就是你具体按的键,charCode0;当捕捉的是keypress事件时,keyCode0charCode指的是你按下的字符

当捕捉的是keypress事件时,当你按的是可打印字符时,keyCode0charCode指的是你按下的字符的键值,当你按的是不可打印字符时,keyCode为按下的键的键值,charCode0

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

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

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

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) :找到触发事件的元素的所有祖先元素中的tagNametagName的一个元素
observe(element, name, observer, useCapture):注册事件处理函数
stopObserving(element, name, observer, useCapture):撤销注册的事件



------君临天下,舍我其谁------