原型 - 事件处理
事件管理是实现跨浏览器脚本编写的最大挑战之一。每个浏览器都有不同的方法来处理击键。
Prototype Framework 处理所有跨浏览器兼容性问题,让您摆脱与事件管理相关的所有麻烦。
Prototype Framework 提供了Event命名空间,其中充满了方法,所有方法都将当前事件对象作为参数,并在所有主要浏览器中愉快地生成您所请求的信息。
事件命名空间还提供了可与键盘相关事件一起使用的标准化按键代码列表。以下常量在命名空间中定义 -
| 编号 | 关键常量和描述 |
|---|---|
| 1. | KEY_BACKSPACE 代表退格键。 |
| 2. | 键标签 代表tab键。 |
| 3. | 回车键 代表返回键。 |
| 4. | KEY_ESC 代表esc键。 |
| 5. | 左键 代表左键。 |
| 6. | 按键_UP 代表向上键。 |
| 7. | KEY_RIGHT 代表右键。 |
| 8. | 按键_向下 代表向下键。 |
| 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>
// 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. | 元素()
返回发生事件的 DOM 元素。 |
| 2. | 延长()
使用 Event.Methods 中包含的所有方法扩展事件。 |
| 3. | 查找元素()
返回具有给定标签名称的第一个 DOM 元素,从事件发生的元素开始向上。 |
| 4. | isLeftClick()
确定与按钮相关的鼠标事件是否与“左”(实际上是主)按钮有关。 |
| 5. | 观察()
在 DOM 元素上注册事件处理程序。 |
| 6. | 指针X()
返回鼠标事件的绝对水平位置。 |
| 7. | 指针Y()
返回鼠标事件的绝对垂直位置。 |
| 8. | 停止()
停止事件的传播并防止最终触发其默认操作。 |
| 9. | 停止观察()
注销事件处理程序。 |
| 10. | 卸载缓存()
注销所有通过观察注册的事件处理程序。自动为您接线。自 1.6 起不再可用。 |