原型 - 事件处理

事件管理是实现跨浏览器脚本编写面临的最大挑战之一。每个浏览器都有不同的方法来处理按键。

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 版起不可用。

打印页面