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 解析后的xml对象的读取方法细解
Jul 25 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
jquery插件格式实例分析
Jun 16 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 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时间戳和日期相互转换操作实例小结
2018/12/18 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
Javascript实现的分页函数
2006/12/22 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
python实现百度关键词排名查询
2014/03/30 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python如何实现代码检查
2019/06/28 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
《山谷中的谜底》教学反思
2014/04/26 职场文书
食品安全标语
2014/06/07 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
关爱空巢老人感想
2015/08/11 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
python基础学习之递归函数知识总结
2021/05/26 Python
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android