js实现onblur
实现 onblur 事件的方法
在 JavaScript 中，onblur 事件在元素失去焦点时触发。可以通过多种方式实现该事件监听。
内联 HTML 属性方式
直接在 HTML 元素上添加 onblur 属性：
<input type="text" onblur="console.log('Input lost focus')">DOM 属性绑定方式
通过 JavaScript 代码为元素设置 onblur 属性：
document.getElementById("myInput").onblur = function() {
console.log("Input lost focus");
};addEventListener 方法
使用标准的事件监听方法，支持添加多个事件处理器：
document.getElementById("myInput").addEventListener("blur", function() {
console.log("Input lost focus via addEventListener");
});注意事项
onblur与addEventListener('blur')的主要区别在于前者会覆盖已有处理器，后者允许多个处理器共存- 表单验证是
onblur事件的常见应用场景 - 事件冒泡阶段触发，可以通过
event.target获取失去焦点的元素
实际应用示例
为表单输入框添加失去焦点验证：
const emailInput = document.getElementById("email");
emailInput.addEventListener("blur", validateEmail);
function validateEmail(event) {
const email = event.target.value;
if (!email.includes("@")) {
event.target.style.borderColor = "red";
} else {
event.target.style.borderColor = "";
}
}浏览器兼容性
所有现代浏览器都支持 onblur 事件，包括：
- Chrome
- Firefox
- Safari
- Edge
- Internet Explorer 9+
对于更复杂的场景，可以考虑结合 focusout 事件，它会在元素或其子元素失去焦点时触发。
