(十一).Prototype(1.5 rc2)使用指南之form
這一部分提供了很多與表單操作有關的功能,包括以下部分,當通過$方法返回元素時,可以直接通過$(element).method()調用:
Form對象:提供了操作整個表單的一些方法
Form.Element對象:提供了操作某個表單元素的方法
TimedObserver類:周期性表單監(jiān)視器,當表單元素值改變的時候執(zhí)行一個回調函數,有Form和Element兩種類型
EventObserver類:利用事件來監(jiān)視表單元素,當表單元素值改變的時候執(zhí)行一個回調函數,有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):使整個表單處于不可用狀態(tài)
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類:
周期性監(jiān)視表單元素,如果表單或表單元素的值有改變時,執(zhí)行執(zhí)行一個回調函數,使用方式如下:
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類:
這兩個類跟上面的差不多,只是不是周期性的監(jiān)視,而是利用元素的change或click事件來監(jiān)視表單元素的變化,當發(fā)生變化時執(zhí)行callback,參數跟上面一樣
(十二).Prototype(1.5 rc2)使用指南之event.js
在介紹Prototype中Event對象前先介紹一下瀏覽器中的事件模型,瀏覽器中的事件主要有HTML事件、鼠標事件和鍵盤事件,前兩種事件比較好理解,這里主要解釋一下鍵盤事件以及它在IE和firefox中的區(qū)別
鍵盤事件包括keydown、kepress和keyup三種,每次敲擊鍵盤都會(依次?)觸發(fā)這三種事件,其中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
注意:功能鍵不會觸發(fā)keypress事件,因為keypress對應的就是可打印的字符,但是有一點IE和FF 中的區(qū)別,你按下一個字符鍵的同時按下alt鍵,在IE中不觸發(fā)keypress事件,但是在ff中可觸發(fā),我發(fā)現在IE中按下ctrl鍵的時候只有按下 q鍵會觸發(fā)事件其他的要么不會觸發(fā)事件,要么被瀏覽器IE自身捕獲了,例如你按下ctrl_A,全選某個東西,你按ctrl_S保存文件,但是在FF中就好多了,事件都是先傳遞到網頁,再向外傳遞
鑒于IE和FF中的區(qū)別,如果你比較懶的話,建議只使用keydow和keyup事件,這兩種事件的使用在IE和FF中基本上沒有區(qū)別,也不要捕獲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) :返回觸發(fā)事件的元素
isLeftClick(event) :判斷是否按下的左鍵
pointerX(event) :事件觸發(fā)時鼠標的橫坐標,對于非鼠標事件,在ff中沒有此信息,但在ie中有?
pointerY(event):事件觸發(fā)時鼠標所在位置的縱坐標
stop(event):阻止事件向上傳播和瀏覽器的默認處理方法
findElement(event, tagName) :找到觸發(fā)事件的元素的所有祖先元素中的tagName為tagName的一個元素
observe(element, name, observer, useCapture):注冊事件處理函數
stopObserving(element, name, observer, useCapture):撤銷注冊的事件