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 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
SVG描边动画
Feb 23 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
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/10/17 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
Python中的一些陷阱与技巧小结
2015/07/10 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python使用代理ip访问网站的实例
2018/05/07 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python实现两张图片的像素融合
2019/02/23 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
12月红领巾广播稿
2014/02/13 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
停车位租赁协议书
2014/09/24 职场文书
开幕式邀请函
2015/01/31 职场文书
2019年工作总结范文
2019/05/21 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
redis实现排行榜功能
2021/05/24 Redis