This Is A FineDay

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  93 随笔 :: 0 文章 :: 69 评论 :: 0 Trackbacks

( 十一 ).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)
:撤销注册的事件

posted on 2008-07-03 21:50 Peter Pan 阅读(143) 评论(0)  编辑  收藏 所属分类: JS

只有注册用户登录后才能发表评论。


网站导航: