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支持事件冒泡，子元素触发后会向节点树查找是否还有触发相关事件。