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

时间:2022-11-30 空山与新雨人气:0

前言

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

触发场景

鼠标点击
键盘tab键
直接调用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>

加载全部内容