一、什么是onblur

1、onblur 是 javascript 事件之一，当元素失去焦点时被触发。 2、最常用的应用场景是表单验证，例如当用户在输入框中输入完成时，需要对所输入的内容进行验证，这时可以使用 onblur 事件来触发验证函数。

二、onblur 用法

1、JS 代码中绑定 onblur 事件：

$("#input").blur(function(){
  // 失去焦点后执行的代码
})

2、HTML 元素上绑定 onblur 事件：

<input id="input" type="text" onblur="blurFunction()" />
<script>
  function blurFunction(){
    // 失去焦点后执行的代码
  }
</script>

3、使用 .on() 方法绑定 onblur 事件：

$("#input").on("blur", function(){
  // 失去焦点后执行的代码
})

三、onblur 验证例子

下面是一个使用 onblur 进行表单验证的例子。

<form>
  <input type="text" id="username" />
  <input type="text" id="email" />
  <input type="submit" value="Submit" />
</form>
<script>
  $("#username").blur(function(){
    if(this.value === ''){
      alert('请输入用户名');
    }
  });
  $("#email").blur(function(){
    var emailReg = /[a-zA-Z0-9_]+@[a-zA-Z0-9]+\.[a-zA-Z]+/;
    if(!emailReg.test(this.value)){
      alert('请输入正确的邮箱地址');
    }
  });
</script>

这个例子中，当焦点离开 username 和 email 输入框时，会分别进行是否为空和是否符合邮箱格式的验证。

四、onblur 与 onchange 的区别

1、onblur 事件是在元素失去焦点时触发，而 onchange 事件是在元素的值被修改并失去焦点时触发。 2、在输入框中输入文本，当焦点离开时，onblur 事件会被触发；而 onchange 事件只有在焦点离开并且输入框中的值发生了改变才会被触发。 3、例如一个下拉选择框，在选择一个新选项并点击其他地方时，onblur 事件会被触发；而 onchange 事件只有在选择一个新选项后才会被触发。

五、onblur 的注意事项

1、onblur 事件不能被键盘事件替代，因为键盘事件只有在输入框中有值变化时才被触发。 2、在使用 onblur 事件时，应注意鼠标点击元素和使用 TAB 键离开元素的区别。 3、当一个元素使用 onblur 事件进行验证时，应该始终将对应的验证信息提示给用户，以便用户知道如何修改输入内容。

六、总结

1、onblur 事件是在元素失去焦点时被触发。 2、最常用的应用场景是表单验证。 3、onblur 事件可以使用 JS 代码、HTML 属性以及 .on() 方法来绑定。 4、onblur 与 onchange 的区别在于值是否发生了改变。 5、使用 onblur 事件时应注意鼠标点击和 TAB 键离开的区别。 6、当使用 onblur 事件进行表单验证时，应该始终将验证信息提示给用户。