Prototype – 事件处理

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

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

Prototype Framework 提供了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
代表主页键。
11.KEY_END
表示结束键。
12.KEY_PAGEUP
代表翻页键。
13.KEY_PAGEDOWN
代表翻页键。

如何处理事件

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

例子

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "https://cdn.bootcdn.net/ajax/libs/prototype/1.7.3/prototype.min.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相关的所有方法的完整列表。您最有可能经常使用的函数是observeelementstop

原型事件方法

注意:确保你至少拥有 prototype.js 的 1.6 版本。

编号方法及说明
1.element()
返回发生事件的 DOM 元素。
2.extend()
使用 Event.Methods 中包含的所有方法扩展事件。
3.findElement()
返回具有给定标签名称的第一个 DOM 元素,从事件发生的元素向上。
4.isLeftClick()
确定与按钮相关的鼠标事件是否与“左”(实际上是主要的)按钮有关。
5.observe()
在 DOM 元素上注册事件处理程序。
6.pointerX()
返回鼠标事件的绝对水平位置。
7.pointerY()
返回鼠标事件的绝对垂直位置。
8.stop()
停止事件的传播并防止最终触发其默认操作。
9.stopObserving()
注销事件处理程序。
10.unloadCache()
注销所有通过观察注册的事件处理程序。自动为您接线。从 1.6 开始不可用。

作者:terry,如若转载,请注明出处:https://www.web176.com/prototype/8238.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2023年1月17日 下午6:39
下一篇 2023年1月19日 下午1:54

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注