原型 - 事件處理

事件管理是實現跨瀏覽器指令碼編寫面臨的最大挑戰之一。每個瀏覽器都有不同的方法來處理按鍵。

Prototype 框架處理所有跨瀏覽器相容性問題，並讓您免受與事件管理相關的所有麻煩。

Prototype 框架提供Event名稱空間，其中包含大量方法，所有方法都將當前事件物件作為引數，並在所有主要瀏覽器中愉快地生成您請求的資訊。

Event 名稱空間還提供了一個標準化的鍵程式碼列表，您可以將其與鍵盤相關事件一起使用。以下常量在名稱空間中定義：

序號	鍵常量及描述
1.	KEY_BACKSPACE 表示退格鍵。
2.	KEY_TAB 表示製表鍵。
3.	KEY_RETURN 表示回車鍵。
4.	KEY_ESC 表示 Esc 鍵。
5.	KEY_LEFT 表示左箭頭鍵。
6.	KEY_UP 表示上箭頭鍵。
7.	KEY_RIGHT 表示右箭頭鍵。
8.	KEY_DOWN 表示下箭頭鍵。
9.	KEY_DELETE 表示刪除鍵。
10.	KEY_HOME 表示 Home 鍵。
11.	KEY_END 表示 End 鍵。
12.	KEY_PAGEUP 表示 Page Up 鍵。
13.	KEY_PAGEDOWN 表示 Page Down 鍵。

如何處理事件

在開始之前，讓我們看看使用事件方法的一個示例。此示例演示如何捕獲發生事件的 DOM 元素。

示例

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

輸出

以下是與Event相關的所有方法的完整列表。您最有可能經常使用的函式是observe、element和stop。

原型事件方法

注意 - 確保您至少擁有 prototype.js 1.6 版。

序號	方法及描述
1.	element() 返回發生事件的 DOM 元素。
2.	extend() 使用 Event.Methods 中包含的所有方法擴充套件event。
3.	findElement() 返回具有給定標籤名的第一個 DOM 元素，從發生事件的元素向上查詢。
4.	isLeftClick() 確定與按鈕相關的滑鼠事件是否與“左”（實際上是主）按鈕有關。
5.	observe() 在 DOM 元素上註冊事件處理程式。
6.	pointerX() 返回滑鼠事件的絕對水平位置。
7.	pointerY() 返回滑鼠事件的絕對垂直位置。
8.	stop() 停止事件的傳播並阻止其預設操作最終被觸發。
9.	stopObserving() 登出事件處理程式。
10.	unloadCache() 登出透過 observe 註冊的所有事件處理程式。自動為您連線。自 1.6 版起不可用。

列印頁面