分類  >  Web前端 >

prototype事件監聽步驟

tags:    時間:2013-12-10 00:12:36
prototype事件監聽方法
observe
Event.observe(element, eventName, handler[, useCapture = false])
在 DOM 元素上註冊事件處理程序。
重要提示
首先,如果你曾經使用過 HTML 事件屬性(如 <body onload="return myFunction()">)或 DOM Level-0 的事件屬性(如 window.onload = myFunction;),你一定要忘記那些糟糕的做法,然後了解 observe 是怎麼做的。

對於那些相同的元素事件(element+event)組合,它並不會替換已經存在的事件處理程序,而是將新的處理程序增加到元素事件組合的 處理程序列表 中。使用 observe 再也不會影響到先前已有的事件處理程序調用了。

參數說明
對於希望增加事件處理的 DOM 元素:按照 Prototype 的一貫原則,可以使用一個真實的 DOM 節點引用,也可以使用元素的 ID 字元串。
根據瀏覽器所支持的 DOM 級別(通常支持 DOM Level 2 事件,詳細的事件名稱及細節請查看 1.6 節),採用相應的標準化的事件名稱。這就像 'click' 一樣簡單易用。
事件處理函數可以是一個匿名函數、一個普通的函數或是一個 作為事件偵聽器的綁定函數,這取決於你。
可選的,可以使用 捕獲(capturing)來阻止事件 冒泡(bubbling),關於這兩個概念,DOM 規範中有詳細的描述。注意 捕獲 在個別主流的瀏覽器上並不支持,但是這個參數也很少會用到。通常情況下, 根本不需要使用這個參數。
經常忘記的一個前提條件…
為註冊函數作為事件處理程序,相關的 DOM 元素必須已經存在於 DOM 樹中(換句話說,該元素必須出現在 HTML 源代碼中,或者在註冊事件處理程序的代碼運行前,已動態的創建和插入到 DOM 中)。

一個簡單的樣例
假設有以下 (X)HTML 片斷:

<form id="signinForm" method="post" action="/auth/signin">… </form>
下面的代碼描述了如何在表單提交事件上註冊函數 checkForm:

Event.observe('signinForm', 'submit', checkForm);
當然,你會希望這行代碼運行時,表單已存在於 DOM 中。但是在文檔 <head> 以外的地方放置一對 <script> 標籤實在有礙觀瞻,因此請使用一種簡單的方式來代替——在頁面完全載入后再載入處理程序:

Event.observe(window, 'load', function() {
Event.observe('signinForm', 'submit', checkForm);
});
只增加了一點點封裝…

注意,如果頁面非常大,你可能希望在頁面未完全載入前就運行這段代碼(只需等待相應的 DOM 節點載入)。目前沒有標準的事件支持這樣做, 但是這篇文章指出了一些有用的方法。

需要使用 this 引用的複雜情形
當你的事件處理程序作為函數參數傳遞時,會失去事件處理函數的 綁定。也就是說,會失去原始的事件處理函數中 this 所指向的對象。如果你所傳遞的方法需要使用 this 引用(例如訪問 this 所表示的容器對象中的欄位),這會有一些麻煩。

為解決這個問題,Prototype 專門提供了一個 bindAsEventListener 方法, 如果你以前未曾見過,請查閱相關的文檔。該方法的使用非常簡單:

var Checks = {
// 我們的 'generic' 函數所需的一些信息
generic: function(event) {
// 表單校驗邏輯(例如非空欄位校驗)
}
};

Event.observe('signinForm', 'submit', Checks.generic.bindAsEventListener(Checks));

推薦閱讀文章

Bookmark the permalink ,來源:互聯網