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

更新時間：2022年11月28日 14:58:32 作者：空山與新雨

這篇文章主要為大家介紹了React使用tabIndex使非表單元素支持focus和blur事件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

在瀏覽器中表單元素天然支持focus和blur事件，這兩個事件在開發(fā)過程中出現(xiàn)的頻率還是挺高的，前端開發(fā)者也都比較熟悉，在這里特意總結一下。

觸發(fā)場景

鼠標點擊
鍵盤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') // 會觸發(fā)focus
  })
</script>

不支持冒泡

下面的例子中我們期待focus<input />的時候會觸發(fā)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') // 不會觸發(fā)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') // 會觸發(fā)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') // 會觸發(fā)focus
    }
    inputFocus=()=>{
      console.log('input focus') // 會觸發(fā)focus
    }
    render() {
      return <div onFocus={this.focus}  >
        react <input onFocus={this.inputFocus} />
      </div>
    }
  }
  window.onload = function () {
    ReactDOM.render(<App />, document.querySelector('#root'))
  }
</script>

以上就是focus blur 事件的詳細內容，更多關于focus blur 事件的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: