Implement onFocus/onBlur by onClick

源起為想要寫一個客制化的下拉選單，因為客制化程度很高，所以不適合使用原生的 <select> ，想說自己來刻一個 <DropDownList>。

如果使用原生的 <select> ，若畫面上有2個以上的選單，第一個打開時，直接點選另一個 <select> ，則原本打開的會關閉，而剛選到的會打開。這是因為 <select> 和 <input> 這類的元素預設都有 focus 和 blur 的事件屬性。但如果是使用 <div> 這種元素就沒辦法達到 focus/blur 的效果。

腦筋就動到如何利用 click事件，達到點選 <DropDownList> 內部時打開選單，而點選外部關閉。點選內部很容易，但外部的任意元素，就綁 click事件到document 身上。技巧在於

(1) 利用 click 事件的 event.target 回傳的Type 是 Node，

(2) Node具有 contains 方法，可以判斷其是否包含另一結定的 Node

實作的範例如下，類似的情境應該也適用 Popup 和 Modal 類的 Component