React tabIndex使非表單元素支持focus和blur事件
更新時(shí)間：2022年11月28日 14:58:32 作者：空山與新雨
這篇文章主要為大家介紹了React使用tabIndex使非表單元素支持focus和blur事件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
前言
在瀏覽器中表單元素天然支持focus和blur事件，這兩個(gè)事件在開發(fā)過(guò)程中出現(xiàn)的頻率還是挺高的，前端開發(fā)者也都比較熟悉，在這里特意總結(jié)一下。
觸發(fā)場(chǎng)景
- 鼠標(biāo)點(diǎn)擊
- 鍵盤tab鍵
- 直接調(diào)用dom的focus,blur方法
使用tabIndex使非表單元素支持focus和blur事件
給一個(gè)普通的div元素增加tabIndex屬性后，這個(gè)元素就能支持focus和blur事件了?？梢栽O(shè)置tabIndex為-1，這樣元素既可以被focus，同時(shí)不會(huì)被鍵盤訪問(wèn)到。
<div id="d1" tabindex="-1">
1111
</div>
<script>
const d1 = document.querySelector('#d1');
d1.addEventListener('focus', function () {
console.log('d1 focus') // 會(huì)觸發(fā)focus
})
</script>
不支持冒泡
下面的例子中我們期待focus<input />的時(shí)候會(huì)觸發(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') // 不會(huì)觸發(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') // 會(huì)觸發(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') // 會(huì)觸發(fā)focus
}
inputFocus=()=>{
console.log('input focus') // 會(huì)觸發(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 事件的詳細(xì)內(nèi)容，更多關(guān)于focus blur 事件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
react+react-beautiful-dnd實(shí)現(xiàn)代辦事項(xiàng)思路詳解
這篇文章主要介紹了react+react-beautiful-dnd實(shí)現(xiàn)代辦事項(xiàng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
使用 React hooks 實(shí)現(xiàn)類所有生命周期
react 自 16.8 開始，引入了 Hooks 概念，使得函數(shù)組件中也可以擁有自己的狀態(tài)，并且可以模擬對(duì)應(yīng)的生命周期，這篇文章主要介紹了使用 React hooks 怎么實(shí)現(xiàn)類里面的所有生命周期,需要的朋友可以參考下2023-02-02
react框架next.js學(xué)習(xí)之API?路由篇詳解
這篇文章主要為大家介紹了react框架next.js學(xué)習(xí)之API?路由篇詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
React中異步數(shù)據(jù)更新不及時(shí)問(wèn)題及解決
這篇文章主要介紹了React中異步數(shù)據(jù)更新不及時(shí)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
React路由組件傳參的三種方式(params、search、state)
本文主要介紹了React路由組件傳參的三種方式，主要包括了params、search、state，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
React?Hooks之useDeferredValue鉤子用法示例詳解
useDeferredValue鉤子的主要目的是在React的并發(fā)模式中提供更流暢的用戶體驗(yàn),特別是在有高優(yōu)先級(jí)和低優(yōu)先級(jí)更新的情況下,本文主要講解一些常見(jiàn)的使用場(chǎng)景及其示例2023-09-09
淺談React Native 傳參的幾種方式(小結(jié))
這篇文章主要介紹了淺談React Native 傳參的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家介紹了React?組件樹遍歷技巧的掌握，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了react中使用usestate踩坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解Stack?Navigator中使用自定義的Render?Callback
這篇文章主要為大家介紹了Stack?Navigator中使用自定義的Render?Callback使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10