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 相关文章推荐
JavaScript 的方法重载效果
Aug 07 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
js的三种继承方式详解
Jan 21 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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 巧用数组降低程序的时间复杂度
2010/01/01 PHP
解析php取整的几种方式
2013/06/25 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
js获取页面description的方法
2015/05/21 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
python实现教务管理系统
2018/03/12 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
Python作用域与名字空间原理详解
2020/03/21 Python
python计算auc的方法
2020/09/09 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
linux面试题参考答案(8)
2015/08/11 面试题
常见的软件开发流程有哪些
2015/11/14 面试题
销售经理岗位职责
2014/03/16 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技