React tabIndex使非表單元素支持focus和blur事件
前言
在瀏覽器中表單元素天然支持focus和blur事件，這兩個(gè)事件在開發(fā)過程中出現(xiàn)的頻率還是挺高的，前端開發(fā)者也都比較熟悉，在這里特意總結(jié)一下。
觸發(fā)場景
- 鼠標(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ì)被鍵盤訪問到。
<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 事件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用React hook實(shí)現(xiàn)remember me功能
相信大家在使用 React 寫頁面的時(shí)候都遇到過完成 Remember me 的需求吧！本文就將這個(gè)需求封裝在一個(gè) React hook 中以供后續(xù)的使用,覺得有用的同學(xué)可以收藏起來以備不時(shí)之需,感興趣的小伙伴跟著小編一起來看看吧2024-04-04
React將組件（component）看成一個(gè)狀態(tài)機(jī)（State Machines），通過其內(nèi)部自定義的狀態(tài)（State）和生命周期（Lifecycle）實(shí)現(xiàn)并與用戶交互，維持組件的不同狀態(tài)2022-11-11
React jsx轉(zhuǎn)換與createElement使用超詳細(xì)講解
這篇文章主要介紹了React jsx轉(zhuǎn)換與createElement使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
react滾動(dòng)加載useInfiniteScroll?詳解
使用useInfiniteScroll?hook可以處理檢測用戶何時(shí)滾動(dòng)到頁面底部的邏輯,并觸發(fā)回調(diào)函數(shù)以加載更多數(shù)據(jù),它還提供了一種簡單的方法來管理加載和錯(cuò)誤消息的狀態(tài),今天通過實(shí)例代碼介紹下react滾動(dòng)加載useInfiniteScroll?相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2023-09-09
react中的useImperativeHandle()和forwardRef()用法
這篇文章主要介紹了react中的useImperativeHandle()和forwardRef()用法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板
這篇文章主要介紹了react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
基于React實(shí)現(xiàn)無限滾動(dòng)表格
以文本為例,為了實(shí)現(xiàn)無限循環(huán)的視覺效果,我們需要準(zhǔn)備兩段相同的文本,并讓第二段文本的頭部銜接在第一段文本的尾部,同時(shí),為兩段文本設(shè)置相同的滾動(dòng)動(dòng)畫,本文給大家介紹了基于React實(shí)現(xiàn)無限滾動(dòng)表格,需要的朋友可以參考下2023-11-11
antd-react使用Select組件defaultValue踩的坑及解決
這篇文章主要介紹了antd-react使用Select組件defaultValue踩的坑及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
React ts模式使用http-proxy-middleware代理時(shí)訪問報(bào)404問題
這篇文章主要介紹了React ts模式使用http-proxy-middleware代理時(shí)訪問報(bào)404問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
React Native 真機(jī)斷點(diǎn)調(diào)試+跨域資源加載出錯(cuò)問題的解決方法
下面小編就為大家分享一篇React Native 真機(jī)斷點(diǎn)調(diào)試+跨域資源加載出錯(cuò)問題的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01