JavaScript Event学习第十章 一些可替换的事件对


Posted in Javascript onFebruary 10, 2010

测试的局限性
这一章我们打算寻找哪些事件可以用来仿真鼠标事件。注意这一系列测试不包括屏幕阅读器。因为我不能满足所有的条件,因此测试也有局限性。这个测试目标仅仅只是那些在图形界面下的浏览器中不使用鼠标的用户。
我假设这些测试一样可以用来在一些移动设备上。因为条件不足,所以也不能测试。很多时候在移动设备上表现总是不尽如人意。
总结
不幸的是,我们不能制定一个严格的鼠标事件和非鼠标的一对一的方案,因为非鼠标事件和鼠标事件有很多不同。所以下面的建议在大多数场合适用,但不是所有。
下面就是我的测试结果:
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只对链接和表单有用。所以我需要对把事件添加的图像的父节点上:链接。
这个简单的例子不会因为我们的重新注册改变,但更复杂的脚本可能会无法界定访问活动,例如,一个div。
为了保证完美的可用性,我们可以只定义链接和表单的事件,就像我们再1998年时候那样干的。虽然网上的大部分事件还是定义在链接上,不过一个复杂的比如文本编辑的脚本对于非鼠标用户就不可用,因为我们要在上面click。

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

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

Javascript 相关文章推荐
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
jQuery插件 tabBox实现代码
Feb 09 #Javascript
基于Jquery的简单&简陋Tabs插件代码
Feb 09 #Javascript
JQUERY操作JSON实例代码
Feb 09 #Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 #Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 #Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 #Javascript
一个XML格式数据转换为图表的例子
Feb 09 #Javascript
You might like
php中count获取多维数组长度的方法
2014/11/03 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
srcElement表格样式
2006/09/03 Javascript
js类型检查实现代码
2010/10/29 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
vue学习笔记之指令v-text && v-html && v-bind详解
2017/05/12 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
Python的mysql数据库的更新如何实现
2017/07/31 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
对Django url的几种使用方式详解
2019/08/06 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
考试退步检讨书
2014/01/15 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书