浏览器兼容input的focusblur事件的事件委托实现

Posted 2021-04-30 前端开发自留地

(如喜欢请点击上方公众号，可快速关注)

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 = ''; });