JQ focus blur focusin focuseout

查閱資料後發現一般默認狀況下div是沒有focusable屬性的，所以在給div元素綁定了事件的時候,無論有沒有彙集焦點，函數中的事件都不會發生，因此在綁定的div標籤後面添加tabindex="1"，加上focusable屬性。 此時進行驗證就能夠清晰看出，input元素是否獲取焦點，blur和focus綁定的事件都不會發生，可是focusin和focuseout綁定的事件是隻要div元素（包括後代元素）得到或失去焦點就會發生。哪些元素是focusable的 默認狀況下，只有部分html元素能得到鼠標焦點如input，很大一部分html元素是不能得到鼠標焦點的如div，這些可以得到鼠標焦點的元素就是focusable 元素。要想一個元素得到焦點，能夠經過三種方式：

鼠標點擊 tab 鍵 調用focus()方法 默認狀況下的focusable 元素

window：當頁面窗口從隱藏變成前置可見時，focus 事件就會觸發 表單元素(form controllers)：input/option/textarea/button 連接元素(links)：a標籤、area標籤（必需要帶 href 屬性，包括 href 屬性爲空） 設置了 tabindex 屬性（tabindex 值非-1）的元素 設置了contenteditable = "true"屬性的元素 tabindex屬性 默認狀況下就能 focusable 的元素太少，若是想讓一個 div 元素成爲 focusable 的元素怎麼作呢？很簡單，設置 tabindex 屬性便可！ tabindex 有2個做用：

使一個元素變成 focusable 只要在元素上設置了 tabindex 屬性，無論此屬性的值設爲多少，此元素都將變成focusable元素。 定義屢次按下 TAB 鍵時得到焦點的元素順序 tabindex 屬性的值能夠正數、0、負數，當屢次按下TAB鍵，首先是tabindex爲正數的元素得到焦點，順序是：tabindex=一、tabindex=二、tabindex=三、tabindex=...，最後是tabindex=0的元素得到焦點。注意：tabindex爲負數的元素不能經過 TAB 鍵得到焦點，只能經過鼠標點擊或者調用focus()方法才能得到焦點。示例代碼以下：

<ul> <li tabindex="1" onfocus="showFocus(this)">One</li> <li tabindex="0" onfocus="showFocus(this)">Zero</li> <li tabindex="2" onfocus="showFocus(this)">Two</li> <li tabindex="-1" onfocus="showFocus(this)">Minus one</li> <li tabindex="-2" onfocus="showFocus(this)">Minus two</li> </ul> 引用資料https://segmentfault.com/a/1190000003942014

JQ的focus和blur不支持事件冒泡，僅僅在綁定的元素中產生，而focusin和focusout支持事件冒泡，子元素觸發後會向節點樹查找是否還有觸發相關事件。