热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JavaScriptEvent学习第十章一些可替换的事件对_javascript技巧

为了让我们的JavaScript驱动的页面对那些不能或者不想使用鼠标的用户也能很好的使用,我们对于像mouseover和click这样的事件做一些处理,同样的,对于非鼠标事件也同样的要我们的脚本执行。
测试的局限性
这一章我们打算寻找哪些事件可以用来仿真鼠标事件。注意这一系列测试不包括屏幕阅读器。因为我不能满足所有的条件,因此测试也有局限性。这个测试目标仅仅只是那些在图形界面下的浏览器中不使用鼠标的用户。
我假设这些测试一样可以用来在一些移动设备上。因为条件不足,所以也不能测试。很多时候在移动设备上表现总是不尽如人意。
总结
不幸的是,我们不能制定一个严格的鼠标事件和非鼠标的一对一的方案,因为非鼠标事件和鼠标事件有很多不同。所以下面的建议在大多数场合适用,但不是所有。
下面就是我的测试结果:
1、mouseover:focus
2、mouseout:blur
3、click:不需要匹配
4、dblclick:不知道
5、mousedown:keydown(最不坏的选择)
6、mouseup:keyup(最不坏的选择)
7、mousemove:没有鼠标不可能

如果页面一定需要完美的支持非鼠标用户,那么我们可选择的能应用事件处理程序的元素就非常少。实际上就回到了Netscape 3时代,那时候事件处理程序只在链接和表单里才有用。
更多的研究还是有必要的。
准备
在大多数的浏览器中用户可以通过Tab键来飘过整个页面。当他们这样做的时候,焦点就会跳到下一个链接或者表单上。这在IE和Mozilla都可以运作。在Safari里面你需要按F1然后才能激活键盘快捷键。
Opera用户是另外一个系统的。链接上的跳转需要按Ctrl+方向键。虽然是不同的组合,但是我还是会称其为“Tabbing”。
例子:传统的mouseover
如何做到呢?首先也是最重要的为mouseover和mouseout的添加两个事件:

代码如下:


imgs[i].Onmouseover= imgs[i].Onfocus= mouseGoesOver;
imgs[i].Onmouseout= imgs[i].Onblur= mouseGoesOut;




现在当用户鼠标经过或者tab经过时,函数都会被执行。
然而,添加一些事件还是不够的。我原始的工作室直接在图像上设置onmouseover和mouseout。不幸的是tab一个图像基本上不可能:tab只对链接和表单有用。所以我需要对把事件添加的图像的父节点上:链接。
这个简单的例子不会因为我们的重新注册改变,但更复杂的脚本可能会无法界定访问活动,例如,一个p。
为了保证完美的可用性,我们可以只定义链接和表单的事件,就像我们再1998年时候那样干的。虽然网上的大部分事件还是定义在链接上,不过一个复杂的比如文本编辑的脚本对于非鼠标用户就不可用,因为我们要在上面click。

翻译地址:http://www.quirksmode.org/js/events_pairs.html

作者:北玉(tw:@rehawk)
文章出处:beiyu.cnblogs.com

推荐阅读
  • 本文介绍了数据库的存储结构及其重要性,强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离,可以实现对物理存储的重新组织和数据库的迁移,而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构,并介绍了表空间的概念和作用。 ... [详细]
  • IhaveconfiguredanactionforaremotenotificationwhenitarrivestomyiOsapp.Iwanttwodiff ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法,并给出了问题的解析和解决方法。详细介绍了问题的背景和规则,并给出了相应的算法解析和实现步骤。通过本文的解析,读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 推荐系统遇上深度学习(十七)详解推荐系统中的常用评测指标
    原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]
  • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
    本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
  • CSS|网格-行-结束属性原文:https://www.gee ... [详细]
  • mac os Spotlight使用技巧:直接在谷歌搜索
    一、背景想直接借助spotlight进行google。当然现在有现成的第三方可以做到,不想安装第三方二、方法唤起Spotlight,输入想要goo ... [详细]
  • 《Axure新技能:自适应手机屏幕大小》相信不少人都已经看过,并对设置方法已经很熟悉了,但该教程只能适应iphone6的屏幕尺寸的比例&# ... [详细]
  • 文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议(超文本传输协议)是用于从WWW服务 ... [详细]
  • 这个问题发生在重新安装系统后,丢失了之前的privatekey等。所以解决方法就是提示的revokeandrequest。到developercenter中找到certificat ... [详细]
  • 最近在学Python,看了不少资料、视频,对爬虫比较感兴趣,爬过了网页文字、图片、视频。文字就不说了直接从网页上去根据标签分离出来就好了。图片和视频则需要在获取到相应的链接之后取做下载。以下是图片和视 ... [详细]
  • 一、Notification通知是属于桌面性质的通知,在显示器的右下角蹦出二、兼容性IE14以及其他桌面浏览器都支持WebNotification,目前 ... [详细]
author-avatar
濛宝贝儿
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有