日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：空山與新雨 ? 更新時間： 2022-12-26 編程語言

前言

在瀏覽器中表單元素天然支持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>

原文鏈接：https://www.cnblogs.com/walkermag/p/16900330.html

欄目分類
最近更新