focus事件在元素获取焦点时触发. 这个事件和focusin最大的区别仅仅在于后者会事件冒泡。
当一个元素失去焦点的时候blur事件被触发。它和focusout事件的主要区别是focusout支持冒泡。
focusin、focusout正好支持事件冒泡,这样正好可以轻松实现兼容浏览器focus、blur事件的事件委托。
HTML
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password">
</form>
JavaScript
const form = document.getElementById('form');
form.addEventListener('focusin', (event) => {
event.target.style.background = 'pink';
});
form.addEventListener('focusout', (event) => {
event.target.style.background = '';
});