浏览器兼容input的focus、blur事件的事件委托实现

2019-04-104101次阅读javascript

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

 

上一篇: 去掉隐藏IE下input的文本框叉叉和密码输入框的眼睛图标  下一篇: ES6 Promise兼容IE6+引出对es3ify-webpack-plugin的理解  

浏览器兼容input的focus、blur事件的事件委托实现相关文章