欢迎您访问我爱IT技术网,今天小编为你分享的javascript教程:【JavaScript Event学习第十章 一些可替换的事件对】,下面是详细的讲解!
JavaScript Event学习第十章 一些可替换的事件对
测试的局限性
这一章我们打算寻找哪些事件可以用来仿真鼠标事件。注意这一系列测试不包括屏幕阅读器。因为我不能满足所有的条件,因此测试也有局限性。这个测试目标仅仅只是那些在图形界面下的浏览器中不使用鼠标的用户。
我假设这些测试一样可以用来在一些移动设备上。因为条件不足,所以也不能测试。很多时候在移动设备上表现总是不尽如人意。
总结
不幸的是,我们不能制定一个严格的鼠标事件和非鼠标的一对一的方案,因为非鼠标事件和鼠标事件有很多不同。所以下面的建议在大多数场合适用,但不是所有。
下面就是我的测试结果:
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 Event学习第十章 一些可替换的事件对的用户互动如下:
相关问题:javascript学习的一个基础问题,谢谢高手
答:typeof 是一个运算符,得到后面数据的类型,如你所知,有数值,字符串,布尔,对象,函数和未定义。 addLoadEvent这个函数的功能是为onload赋值,onload应该为一个函数,这样当页面加载完成,就可以执行这个函数了。 但如果多次赋值,比如window... >>详细
相关问题:javascript可以自定义事件吗
答:可以。 在IE based浏览器上,你可以用 createEventObject 和 fireEvent 函数来自定义和触发事件,在其他浏览器上用 createEvent 和 dispatchEvent 函数。 var event; // 自定义事件 if (document.createEvent) { event = document.createEvent("... >>详细
相关问题:一个js的event事件的问题
答:这是旧版IE和其他浏览器的区别。 // mousedown的时候进入这个函数function whichKey(evnt) { if (document.all) { // 旧版IE里,evnt是空的 // 所以要使用全局event对象 x = event.button; if (x == 1) alert("你单击了左键"); if (x == 2) aler... >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【dom】javascript dom追加内容实现示例-追加内容
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 【ExtJs】ExtJs 表单提交登陆实现代码-表单提交-
- 【ajax清除浏览器缓存】Ajax清除浏览器js、css、
- 【AJAX】AJAX异步从优酷专辑中采集所有视频及信息
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-
