React tabIndex使非表单元素支持focus和blur事件
前言
在浏览器中表单元素天然支持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>
以上就是focus blur 事件的详细内容,更多关于focus blur 事件的资料请关注脚本之家其它相关文章!
相关文章
React之错误边界 Error Boundaries示例详解
这篇文章主要为大家介绍了React之错误边界Error Boundaries示例教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-10-10React中memo useCallback useMemo方法作用及使用场景
这篇文章主要为大家介绍了React中三个hooks方法memo useCallback useMemo的作用及使用场景示例,有需要的朋友可以借鉴参考下,希望能够有所帮助2023-03-03useEffect如何通过form.getFieldValue(‘xxx‘)监听Form表单变化
这篇文章主要介绍了useEffect如何通过form.getFieldValue(‘xxx‘)监听Form表单变化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论