前言
在浏览器中表单元素天然支持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/[email protected]/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>