作動行為 Activation Behavior

前幾天全知全能的米奧大人在 Twitter 上徵求中階的 JavaScript 課程：

然後 Jedi 提供了一個題目：

後來米奧大人真的交作業了，也有提出一些問題，然後卡西有回應：

其中，「keyup 該觸發 button 上的 onclick」這句引起了我的興趣。

為了要顧及到網頁親和力，所有的控制元件的操作都應該要可以用鍵盤執行，所以像是 button 的動作也應該要可以用鍵盤控制，但是其實我以前一直搞不清楚，這之間正確的關係應該是怎樣，就三種可能性：

  • key 事件觸發 click 事件，click 事件有 default handler
  • click 事件觸發 key 事件，key 事件有 default handler
  • click 事件和 key 事件都有同一個 default handler

當我看到卡西那段文字的時候，我覺得他應該說的是有憑據的，不過我也覺得有些不正確，像是就我的認知，button 的 key 事件預設是不會觸發 click 事件的，於是我就花了點時間研究一下網路標準，這次終於找到規範和正確的關係了。

我先從 button 標籤開始查起，然後注意到一段，在說明 button 的 activation behavior 行為應該如何的文字，行為分成 submit button、reset button 和 button 三種，其中前兩個就像是在說 submit button 和 reset button 的行為一樣，所以我就了解到，activation behavior 就是我要找的關鍵字了，目前將它翻譯為「作動行為」。

然後在 HTML 6.3 Activation 找到：

Certain elements in HTML have an activation behavior, which means that the user can activate them. This is always caused by aclickevent.

The user agent should allow the user to manually trigger elements that have an activation behavior, for instance using keyboard or voice input, or through mouse clicks. When the user triggers an element with a defined activation behavior in a manner other than clicking it, the default action of the interaction event must be to fire aclickevent at the element.

第一段就是說作動行為（activation behavior）都是click事件觸發，第二段則是說瀏覽器要讓其它方法（像是鍵盤、語音操作等）可以觸發作動行為的話，實做的方法應該是在該事件的處理器（event handler）內觸發click事件來觸發該 HTML 元素的作動行為。這段文字就可以證明卡西說的基本上沒錯，另外就是我有疑惑的，應該是keydown還是keyup事件呢？根據我自己的實驗結果應該是要用keydown，不過總還是想找一下標準定義的出處，雖然沒有找到很明確的文字說明，不過 UI Events 3.5. Activation triggers and behavior 裡面的 EXAMPLE 4 內確實是寫 keydown event，當然keydown的時間點也比較符合期待，目前在不同標準文件內看到的範例也都是用 keydown。

查到這邊大概就可以確定，正確的關係應該是「key 事件觸發 click 事件，click 事件有 default handler」，不過卡西說的小錯誤是應該要用 keydown 事件，然後我在 twitter 有回說普通 button 不應該 keydown 觸發 click 則是我當時的錯誤認知（請見 ENTER or SPACE, KEYDOWN or KEYUP）。

再來，其實我還很好奇，哪裡有定義不同的元素分別用哪些按鍵 active 呢？因為表單送出是用 ENTER 鍵，但是像是 checkbox 的狀態切換卻是用 SPACE 鍵；上面提供的幾份文件也都沒講到這部分的定義，有種刻意避開的感覺，後來又找了許久才終於找到，其實是放在 WAI-ARIA Authoring Practices 這份 Working Group Note 內，拿 checkbox 為例，在它的 Keyboard Interaction 段落內就明白寫了：

When the checkbox has focus, pressing the Space key changes the state of the checkbox.

當然也有 button 的規範，就是同時有定義space和enter；由於這份文件是 Working Group Note，規範的硬性比較低，這應該也是故意為之的。

最後來整理一下，首先是 HTML 文件有定義，預設的作動行為都是透過click事件觸發，但是同時也要保留其它操作介面觸發作動行為的可能性，像是常見的鍵盤行為，而其它操作方式都要透過觸發click事件的方式來觸發作動行為；再來就是不同 HTML 元素的作動行為要做哪些事情也是在 HTML 文件內；至於不同 HTML 元素要支援哪些按鍵呢，這部分就要交叉參考 ARIA in HTML 和 WAI-ARIA Authoring Practices 兩份文件了，前者用來查詢 HTML 元素對應的 ARIA role，後者可以根據 role 來判斷要支援哪些鍵盤按鍵。

以後要做自訂的控制元件的時候，就可以正大光明的把主要的動作寫在 onclick 事件下了（然後根據情況去加上 key event）。