js实现onblur
实现 onblur 事件的方法
在 JavaScript 中，onblur 事件在元素失去焦点时触发。可以通过多种方式实现该事件监听。
方法一：HTML 属性直接绑定
<input type="text" onblur="console.log('Input lost focus')">方法二：addEventListener 动态绑定
const inputElement = document.getElementById('myInput');
inputElement.addEventListener('blur', function() {
console.log('Input lost focus');
});方法三：通过元素属性赋值
document.getElementById('myInput').onblur = function() {
console.log('Input lost focus');
};实际应用示例
表单验证示例
const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', validateEmail);
function validateEmail() {
const email = this.value;
if (!email.includes('@')) {
this.style.borderColor = 'red';
} else {
this.style.borderColor = 'green';
}
}动态显示/隐藏元素
const searchBox = document.getElementById('search');
const resultsPanel = document.getElementById('results');
searchBox.addEventListener('focus', () => {
resultsPanel.style.display = 'block';
});
searchBox.addEventListener('blur', () => {
setTimeout(() => {
resultsPanel.style.display = 'none';
}, 200);
});注意事项
blur事件会冒泡，而focusout事件不会- 移动端设备上可能需要额外处理触摸事件
- 某些情况下可能需要使用
event.stopPropagation()阻止事件传播
以上方法适用于现代浏览器，包括 IE9+。对于更复杂的场景，可能需要结合其他事件如 focus、focusin 等一起使用。
