查阅资料后发现通常默认情况下div是没有focusable属性的，因此在给div元素绑定了事件的时候,不管有没有聚集焦点，函数中的事件都不会发生，所以在绑定的div标签后面添加tabindex="1"
查阅资料后发现通常默认情况下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=1、tabindex=2、tabindex=3、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支持事件冒泡，子元素触发后会向节点树查找是否还有触发相关事件。
