HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Prototype - 事件处理

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

Prototype Framework 处理所有跨浏览器兼容性问题，让您免于与事件管理相关的所有麻烦。

Prototype Framework 提供 Event 命名空间，其中包含各种方法，所有方法均以当前事件对象为参数，并在所有主流浏览器中愉快地生成您请求的信息。

Event 命名空间还提供了可用于键盘相关事件的标准化键代码列表。命名空间 − 中定义了以下常量

S.No. 键常量 &描述
1.

KEY_BACKSPACE

代表退格键。
2.

KEY_TAB

代表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

代表主页键。
11.

KEY_END

代表结束键。
12.

KEY_PAGEUP

代表向上翻页键。
13.

KEY_PAGEDOWN

表示向下翻页键。

如何处理事件

在开始之前，让我们看一个使用事件方法的示例。此示例显示如何捕获发生事件的 DOM 元素。

示例

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // 注册事件"click"及相关回调。
         Event.observe(document, 'click', respondToClick);
  
         // 回调函数来处理事件。
         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事件方法

注意 − 确保您至少拥有 1.6 版的prototype.js。

S.No. 方法 &描述
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()

取消注册所有通过观察注册的事件处理程序。自动为您连接。自 1.6 版起不可用。
❮ 上一节 下一节 ❯