`
wutao33543
  • 浏览: 64678 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

prototype使用学习手册指南之event.js

阅读更多
键盘事件包括keydown、kepress和keyup三种,每次敲击键盘都会(依次?)触发这三种事件,其中keydown和keyup是比较低级的接近于硬件的事件,通俗的理解是这两个事件可以捕获到你敲击了键盘中某个键;而keypress是相对于字符层面的较为高级点的事件,这个事件能够捕捉到你键入了哪个字符。可以这样理解,如果你敲击了A键,keydown和keyup事件只是知道你敲击了A键,它并不知道你敲的是大写的A(你同时按下了Shift键)还是敲的是小写a,它是以"键"为单位,你敲入了大写的A,它只是当成你敲下了shift和A两个键而已,但是keypress可以捕捉到你是敲入的大写的A还是小写的a.

在介绍Prototype中Event对象前先介绍一下浏览器中的事件模型,浏览器中的事件主要有HTML事件、鼠标事件和键盘事件,前两种事件比较好理解,这里主要解释一下键盘事件以及它在IE和firefox中的区别.

还要理解一个概念是键盘中的键分为字符(可打印)键和功能键(不可打印),功能键包括Backspace, Enter, Escape, the arrow keys, Page Up, Page Down, and F1 through F12 等

下面说一下键盘事件的具体使用方法,

键盘事件的event对象中包含一个keyCode属性,IE中只有这一个属性,当为keydown和keyup 事件是,keycode属性表示你具体按下的键(也称为virtual keycode),当捕捉的是keypress事件时keyCode属性指的是你键入的字符(character code)

在firefox中情况有些不同,event对象包含一个keyCode属性和一个charCode属性,keydown和keyup事件的时候,keyCode表示的就是你具体按的键,charCode为0;当捕捉的是keypress事件时,keyCode为0,charCode指的是你按下的字符

当捕捉的是keypress事件时, 当你按的是可打印字符时,keyCode为0,charCode指的是你按下的字符的键值,当你按的是不可打印字符时,keyCode为按下的键的键值,charCode为0

注意:功能键不会触发keypress事件,因为keypress对应的就是可打印的字符,但是有一点IE和FF 中的区别,你按下一个字符键的同时按下alt键,在IE中不触发keypress事件,但是在ff中可触发,我发现在IE中按下ctrl键的时候只有按下 q键会触发事件其他的要么不会触发事件,要么被浏览器IE自身捕获了,例如你按下ctrl_A,全选某个东西,你按ctrl_S保存文件,但是在FF中就 好多了,事件都是先传递到网页,再向外传递

鉴于IE和FF中的区别,如果你比较懒的话,建议只使用keydow和keyup事件,这两种事件的使用在IE和FF中基本上没有区别,也不要捕获ctrl_A等被浏览器定义为快捷键的事件

键盘事件event对象还有三个其他的属性altKey, ctrlKey, and shiftKey 来判断你按下一个键的时候是否按下了alt等键,这三个属性使用比较简单,三种事件都可以使用,也不存在ie和ff的兼容性问题

在Prototype中的Event中又如下属性:
KEY_BACKSPACE: 8,
  KEY_TAB:       9,
  KEY_RETURN:   13,
  KEY_ESC:      27,
  KEY_LEFT:     37,
  KEY_UP:       38,
  KEY_RIGHT:    39,
  KEY_DOWN:     40,
  KEY_DELETE:   46,
  KEY_HOME:     36,
  KEY_END:      35,
  KEY_PAGEUP:   33,
  KEY_PAGEDOWN: 34,
以及下面的方法:




element(event) :返回触发事件的元素

isLeftClick(event) :判断是否按下的左键

pointerX(event) :事件触发时鼠标的横坐标,对于非鼠标事件,在ff中没有此信息,但在ie中有?

pointerY(event):事件触发时鼠标所在位置的纵坐标

stop(event):阻止事件向上传播和浏览器的默认处理方法

findElement(event, tagName) :找到触发事件的元素的所有祖先元素中的tagName为tagName的一个元素

observe(element, name, observer, useCapture):注册事件处理函数

stopObserving(element, name, observer, useCapture):撤销注册的事件

分享到:
评论

相关推荐

    prototype.js

    1. **入门指南**:介绍如何引入Prototype.js到项目中,以及基本的使用方法。 2. **核心概念**:阐述Prototype.js的核心思想,如DOM操作、Ajax和事件处理。 3. **API参考**:详尽列举了所有提供的函数和方法,以及...

    prototype.js开发笔记.pdf

    下面是Prototype.js的开发笔记,涵盖了该库的使用指南、Ajax对象、JavaScript类的扩展、对象的扩展、事件处理等多个方面。 一、Programming Guide Prototype.js是一个强大的JavaScript库,提供了许多有用的函数和...

    prototype.js开发手册.pdf

    《prototype.js开发手册》是关于JavaScript库Prototype的详细指南,旨在帮助开发者更好地理解和利用这个强大的工具。Prototype由Sam Stephenson创建,它提升了JavaScript的基础功能,为Web开发提供了更丰富的功能和...

    prototype.js开发者手册

    《prototype.js开发者手册》是针对JavaScript库Prototype的一份详尽指南,旨在帮助开发者深入理解和有效利用这个强大的工具。Prototype.js是开源的JavaScript框架,它扩展了JavaScript的基本对象,提供了类和面向...

    ajax:prototype.js很全的手册

    Prototype.js的手册是一份详尽的资源,涵盖了所有核心组件和方法的使用。它不仅包含API参考,还包括示例代码和最佳实践。手册的结构通常如下: 1. **入门指南**:介绍如何引入Prototype.js库,并演示基本的DOM操作...

    Prototype1.5.1使用手册

    《Prototype 1.5.1使用手册》是针对JavaScript库Prototype的一个详细指南,该库是Web开发中的一个强大工具,尤其在处理DOM操作、Ajax交互和函数增强方面表现卓越。本手册以.chm(Compiled Help Manual)格式提供,...

    prototype.js 1.4版开发者手册

    ### prototype.js 1.4版开发者手册知识点梳理 #### 一、概述 - **prototype.js** 是一款功能强大且优雅的 JavaScript 类库,它极大扩展了原生 JavaScript 的能力,并提供了丰富的工具集来简化 Web 开发流程。尤其在...

    Prototype.开发者手册PDF(强烈推荐)+chm帮助文档

    《Prototype开发者手册》是针对JavaScript库Prototype的一份详尽指南,旨在帮助开发者深入理解和高效使用这一强大的工具。Prototype是Web开发中的一个关键组件,尤其在AJAX应用中扮演着重要角色。它通过扩展...

    Prototype&Prototype中文手册

    在学习和使用Prototype时,开发者应熟悉JavaScript基础,理解DOM和AJAX的基本概念。同时,这个中文手册对于初学者来说尤其有用,因为它可以帮助克服语言障碍,使非英语背景的开发者也能轻松掌握Prototype的用法。 ...

    prototype1.6手册

    《Prototype 1.6 手册》是一本详细介绍 Prototype JavaScript 库 1.6 版本的指南。Prototype 是一个广泛使用的 JavaScript 框架,它扩展了 JavaScript 的核心功能,使得开发动态网页和Web应用变得更加高效。这个手册...

    prototype手册

    《Prototype 1.4.js 开发者手册》是JavaScript编程领域中一本重要的参考资料,它主要聚焦于Prototype JavaScript库的版本1.4。Prototype是一个广泛使用的JavaScript框架,它为JavaScript开发提供了许多实用的功能,...

    prototype中文手册chm&pdf

    《Prototype中文手册》是针对JavaScript库Prototype的一份详尽指南,包含了丰富的开发知识和技术细节。Prototype库是一个强大的JavaScript框架,它扩展了JavaScript的核心功能,使得Web应用的开发更为高效便捷。下面...

    Prototype参考手册

    《Prototype参考手册》是关于JavaScript库Prototype的一份详尽指南,该库主要为JavaScript编程提供了一种更加面向对象的语法和实用工具。Prototype是Web开发中的一个重要组件,它通过扩展JavaScript的基本类型和对象...

    ajax 框架 prototype1.6 中文版 天涯浪子

    包含的`prototype16.pdf`可能是Prototype 1.6中文版的用户手册或指南,对于学习和理解框架的用法非常有帮助。`prototype16.xls`可能是一个示例或教程的电子表格,可能包含了代码示例和实践练习。 7. **学习和实践*...

    prototype 权威手册

    ### Prototype权威手册精要 #### 一、Prototype概述 **Prototype** 是一款流行的JavaScript库,它简化了浏览器兼容性问题,并提供了一系列高级功能,使得Web应用开发变得更加简单和高效。本指南旨在帮助开发者深入...

    最新JQuery Prototype 帮助CHM格式

    在这份压缩包中,你将找到_lcy JavaScript语言参考手册.chm,这是一份关于JavaScript基础和高级概念的指南,对于理解JavaScript语言本身非常有帮助。另一个文件_lcy jQuery1.3.chm则是针对jQuery 1.3版本的详细文档...

    JavaScript语言参考手册

    2. **JS手册**:手册通常提供全面的教程和指南,帮助开发者理解和学习JavaScript的各种特性。 **压缩包子文件的文件名称列表**: 这些文件名看起来像是某种索引或数据库的组成部分,而非直接的JavaScript学习资源...

    前端常用开发手册-《JScript语言参考》中文版

    《JScript语言参考》中文版是一份详细而全面的指南,涵盖了JScript的核心概念、语法和实践应用,对于前端开发者来说是不可或缺的学习资源。 1. **基础语法** - 变量:JScript中的变量用于存储数据,使用var关键字...

Global site tag (gtag.js) - Google Analytics