JavaScript Event學習第十章一些可替換的事件對

2019-11-21 00:45:03

字體：大中小

來源：轉載

供稿：網友

測試的局限性
這一章我們打算尋找哪些事件可以用來仿真鼠標事件。注意這一系列測試不包括屏幕閱讀器。因為我不能滿足所有的條件，因此測試也有局限性。這個測試目標僅僅只是那些在圖形界面下的瀏覽器中不使用鼠標的用戶。
我假設這些測試一樣可以用來在一些移動設備上。因為條件不足，所以也不能測試。很多時候在移動設備上表現總是不盡如人意。
總結
不幸的是，我們不能制定一個嚴格的鼠標事件和非鼠標的一對一的方案，因為非鼠標事件和鼠標事件有很多不同。所以下面的建議在大多數場合適用，但不是所有。
下面就是我的測試結果：
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學習第十一章按鍵的檢測

下一篇：jQuery插件 tabBox實現代碼