focus/focusin/focusout

速答：

focusin与focusout事件会冒泡。

focus与blur事件不会冒泡。

什么元素能够focus

默认情况并不是所有元素都能获得焦点。需要满足以下条件之一：

• 可交互的元素（如 input,select,a）。换言之，默认情况下，用于布局的元素（如div, span, table）则不能获得焦点
• 含有tabindex属性的元素

当我们想令非可交互元素获得焦点，可以为其设置tabindex属性。

tabindex属性

tabindex属性接收一个number作为参数，代表按下键盘Tab键时focus元素切换的顺序。

他的规则如下：

• 当tabindex大于等于1，切换时按tabindex从小到大的顺序
• 当tabindex等于0，则tabindex大于等于1的元素切换完后再切换到该元素
• 当tabindex小于0，不能通过Tab切换到该元素，但是可以通过elem.focus()使该元素获得焦点
• 当多个元素tabindex相同，以元素在HTML代码中出现的顺序为准

例子

<ul>
  <li tabindex="1">1</li>
  <li tabindex="0">0</li>
  <li tabindex="2">2</li>
  <li tabindex="-1">-1</li>
</ul>

例子中到代码通过Tab切换时，获得焦点的元素依次为1 - 2 - 0。

focusin/focusout

focus与blur事件不会冒泡。如果想实现事件代理可以通过允许捕获实现。

<form id="form">
  <input type="text" name="name" value="Name">
  <input type="text" name="surname" value="Surname">
</form>

<script>
  // addEventListener第三个参数true，允许捕获
  form.addEventListener("focus", () => form.classList.add('focused'), true);
  form.addEventListener("blur", () => form.classList.remove('focused'), true);
</script>

如果想在冒泡阶段实现事件代理，可以使用focusin与focusout事件替代。

document.activeElement指向当前获得焦点的元素。