Event Pairs

Event Pairs

FROM: http://quirksmode.org/js/events_pairs.html
AUTHOR: Peter-Paul Koch

为了让我们的JavaScript驱动的页面对于不能或者不想使用鼠标的用户更具可访问性，我们不仅应该关心鼠标事件的定义，比如 mouseover 和 clcik，还要提供非鼠标事件的替代方案，确保我们的脚本再用户切换到一个链接时也能正确执行。

测试范围

本页面的内容尝试寻找非鼠标事件下我们应该使用什么来模拟鼠标事件。注意，这一系列测试没有覆盖屏幕阅读器。因为我没有所有的设备，所以我不能对所有情况都进行测试。这些测试仅针对用户不使用鼠标的桌面图形浏览器。

我假设测试也可以用于移动电话中的浏览器，但是因为我没有所有的条件，所以我也无法进行这些测试。尽管，在移动电话中可以获取更多的数据。

总结

不行的是，我们不能创建严格的用一个非鼠标事件模拟鼠标事件的指南。实际上并不存在一对一的关联，因为非鼠标事件的工作方式与鼠标事件不同。因此，下面给出的推荐仅适用于大多数情况，而不是任何情况都适用。

下面是我们的测试结果：

• mouseover: 与 focus 匹配
• mouseout: 与 blur 匹配
• click：没有匹配的需要
• dbclick： 不知道
• mousedown: keydown 是最不好的选择中最好的一个
• mouseup: keyup 是最不好的选择中最好的一个
• mousemove: 没有鼠标不可能模拟

如果页面必须要为非鼠标用户完美访问，那么在我们应用事件处理器的元素的选择上就受到了很大程度的限制。实际上，我们就回到了 Netscape 3 的年代，那时仅有链接和表单字段有事件处理。

需要更加清楚的研究。

准备

在大多数浏览器中，用户能够通过按键盘上的Tab按钮来浏览页面。用户按下按钮时，焦点就跳到下一个链接或表单字段。这点在 Explorer 和 Mozilla 中能正常工作。在 Safiri 中，你可能需要按下 F1 一次，来开始键盘的快捷键。

Opera 使用的方式有些不同。链接中的跳转是通过 Ctrl + 上下方向键来实现的。除了使用了不同的按键，我还是喜欢叫这种方式叫“切换”。

示例：传统的 mouseover

在链接间切换也会引发mouseover的效果。

我是怎么做到的呢? 首先也是最重要的一点是，我将 mouseover 和 mouseout 脚本关联到两个事件，而不只是一个事件上：

imgs[i].onmouseover = imgs[i].onfocus = mouseGoesOver;
imgs[i].onmouseout = imgs[i].onblur = mouseGoesOut;

现在当用户用鼠标经过链接或者离开链接的时候，函数将被调用，同时当用户使用 Tab 在链接间切换的时候也会引发函数被调用。

不管怎么样，添加一点事件并不足够。我的原始脚本通过直接在image上设置onmouseover和onmouseout能够正常工作。不幸的是，图像间的切换并不起作用：Tab 仅在表单字段和链接上起作用。因此，我必须重新定义我的图像的父级元素为链接。

当我们重新定义事件的时候，这个简单的示例并未发生改变，但是在处理从不可用到定义可用事件的过程中可能会产生更加复杂的脚本，比如

。

为了保证完美的可访问性，我们只能在链接和表单字段上定义事件，就像我们回到了 1998。虽然许多脚本可以使用连接来定义事件处理，但是哪些高级功能，比如文本编辑器则只能是不可访问的了，对于非鼠标用户，因为其中需要使用click事件。