js实现onblur

实现 onblur 事件的方法

在 JavaScript 中，onblur 事件在元素失去焦点时触发。以下是几种常见的实现方式：

内联 HTML 属性方式

<input type="text" onblur="myFunction()">

DOM 属性绑定方式

document.getElementById("myInput").onblur = function() {
  console.log("Input lost focus");
};

addEventListener 方法

document.getElementById("myInput").addEventListener("blur", function() {
  console.log("Input lost focus using addEventListener");
});

注意事项

onblur 与 onfocusout 的区别在于事件冒泡，onblur 不冒泡而 onfocusout 会冒泡。

对于动态创建的元素，需要确保在元素添加到 DOM 后再绑定事件。

实际应用示例

表单验证是 onblur 的典型应用场景：

document.getElementById("email").addEventListener("blur", function() {
  if (!this.value.includes("@")) {
    alert("请输入有效的邮箱地址");
    this.focus();
  }
});

以上方法都可以实现元素失去焦点时的处理逻辑，根据项目需求选择合适的方式即可。