小编点评

## 文档总结 以下是您所提供的代码的总结： **1. 支持 focus 和 blur 事件的元素** * `div` 元素可以设置 `tabindex` 属性，使其支持 `focus` 和 `blur` 事件。 * `tabIndex` 属性的值可以设置为 `-1`，使其既可以被 `focus`，同时不会被键盘访问到。 **2. `focus` 事件不支持冒泡** * `focus` 事件通常使用 `capture`选项来捕获事件源元素的冒泡事件，但它不支持 `capture` 为 `true` 的情况。 * 这意味着，如果您想在 `input` 元素中使用 `focus` 事件，需要手动添加 `capture` 属性并设置成 `true`。 **3. `react` 中的 `focus` 和 `blur` 事件支持冒泡** * `react` 使用了合成事件，自己完成了一套冒泡逻辑。 * 这使得 `focus` 和 `blur` 事件可以正常在 `input` 元素上触发。 **4. 代码示例** ```jsx const d1 = document.querySelector('#d1'); d1.addEventListener('focus', function () { console.log('d1 focus') }); // 其他事件逻辑... ``` **5. 总结** * 即使 `div` 元素不是表单元素，它也可以支持 `focus` 和 `blur` 事件。 * `tabindex` 属性用于设置元素的可选择性，而 `capture` 属性用于捕获 `focus` 事件。 * `react` 中的 `focus` 和 `blur` 事件支持冒泡。

正文

前言

在浏览器中表单元素天然支持focus和blur事件，这两个事件在开发过程中出现的频率还是挺高的，前端开发者也都比较熟悉，在这里特意总结一下。

触发场景

1. 鼠标点击

2. 键盘tab键

3. 直接调用dom的focus,blur方法

使用tabIndex使非表单元素支持focus和blur事件

给一个普通的div元素增加tabIndex属性后，这个元素就能支持focus和blur事件了。可以设置tabIndex为-1，这样元素既可以被focus，同时不会被键盘访问到。

<div id="d1" tabindex="-1">
    1111
</div>
<script>
  const d1 = document.querySelector('#d1');
  d1.addEventListener('focus', function () {
    console.log('d1 focus') // 会触发focus
  })
</script>

不支持冒泡

下面的例子中我们期待focus<input />的时候会触发div的focus事件，然而事与愿违，原因就是focus事件不支持冒泡

<div id="d1" tabindex="-1">
    原生 <input id="d2" />
    1111
</div>
<script>
  const d1 = document.querySelector('#d1');
  d1.addEventListener('focus', function () {
    console.log('d1 focus') // 不会触发focus
  })
</script>

支持捕获

<div id="d1" tabindex="-1">
    原生 <input id="d2" />
    1111
</div>
<script>
  const d1 = document.querySelector('#d1');
  d1.addEventListener('focus', function () {
    console.log('d1 focus') // 会触发focus
  }, {capture: true})
</script>

react中的focus和blur支持冒泡

这就很有意思了，原因是react中使用合成事件，自己完成了一套冒泡逻辑。

<div id="root"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.18.4/babel.min.js"></script>
<script type="text/babel">
  class App extends React.Component {
    focus=()=> {
      console.log('div focus') // 会触发focus
    }
    inputFocus=()=>{
      console.log('input focus') // 会触发focus
    }
    render() {
      return <div onFocus={this.focus}  >
        react <input onFocus={this.inputFocus} />
      </div>
    }
  }
  window.onload = function () {
    ReactDOM.render(<App />, document.querySelector('#root'))
  }
</script>