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 相关文章推荐
jQuery 白痴级入门教程
Nov 11 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
JQuery魔力之$("tagName")与selector
Mar 05 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
jQuery实现回到顶部效果
Oct 19 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数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
Python中bisect的用法
2014/09/23 Python
django2 快速安装指南分享
2018/01/05 Python
Python中pillow知识点学习
2018/04/30 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
python中的colorlog库使用详解
2019/07/05 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
小学节能减排倡议书
2014/05/15 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis