焦点事件

涉及焦点的事件主要有focus /focusin /focusout /blur

简述

1. focus:当元素获得焦点时，不支持冒泡；
2. focusin:和focus一样，只是此事件支持冒泡；
3. blur:当focusable元素失去焦点时，不支持冒泡；
4. focusout:和blur一样，只是此事件支持冒泡；

但4个属性都支持捕抓

顺序

focusin > focus

focusout > blur

支持获取焦点的元素

支持获取焦点的元素称为focusable的

1. window：当页面窗口从隐藏变成前置可见时，focus 事件就会触发,这个没有找到可利用的方式 2.表单元素: input/option/textarea/button
2. 链接元素: 带href属性的
3. 设置了tabindex的元素(非-1): 设置了tabindex = n,表示按第n次tab时,会让其元素获得焦点

兼容性

1. focus和blur,基本都支持
2. fixfox: 不支持focusin和focusout
3. chrome: 只能通过dom3绑定focusin和focusout

参考链接

1. https://segmentfault.com/a/1190000003942014