解释jQuery中的blur()和focus()事件

# jQuery中的blur()和focus()事件详解

## 基本概念

`blur()`和`focus()`是jQuery中用于处理表单元素焦点事件的两种重要方法：

```javascript
// focus() 当元素获得焦点时触发
$("input").focus(function(){
  $(this).css("background-color", "#ffffcc");
});

// blur() 当元素失去焦点时触发
$("input").blur(function(){
  $(this).css("background-color", "#ffffff");
});

事件触发时机

focus() 事件

• 用户点击可聚焦元素（如input、textarea等）
• 通过Tab键切换焦点到元素
• 调用元素的focus()方法
• 元素通过autofocus属性自动获得焦点

blur() 事件

• 用户点击其他可聚焦元素
• 通过Tab键移出焦点
• 调用元素的blur()方法
• 表单提交时

实际应用示例

表单验证

$("#email").blur(function(){
  if(!isValidEmail($(this).val())) {
    $(this).next(".error").text("请输入有效的邮箱地址");
  }
});

$("#email").focus(function(){
  $(this).next(".error").text("");
});

动态样式变化

$(".form-control").focus(function(){
  $(this).parent().addClass("active");
}).blur(function(){
  $(this).parent().removeClass("active");
});

与原生JS的区别

jQuery的focus()/blur()是对原生事件的封装，提供了一些额外功能：

1. 跨浏览器一致性
2. 事件委托支持
3. 链式调用能力

事件委托

使用.on()方法实现事件委托：

$(document).on("focus", ".dynamic-input", function(){
  console.log("动态添加的元素获得了焦点");
});

注意事项

1. 不是所有元素都能接收焦点（如div、span等默认不可聚焦）
2. 移动端设备上的行为可能与桌面端不同
3. 频繁的焦点事件处理可能影响性能

高级用法

阻止默认行为

$("input").focus(function(e){
  if(condition) {
    e.preventDefault();
    $(this).blur();
  }
});

组合使用

$("input").focus(function(){
  // 获得焦点时执行
}).blur(function(){
  // 失去焦点时执行
});

最佳实践

1. 使用事件委托处理动态添加的元素
2. 避免在事件处理函数中执行耗时操作
3. 考虑使用focusin/focusout处理冒泡场景
4. 及时清理不需要的事件处理器

常见问题解决方案

问题1：事件不触发

解决方案：

• 检查元素是否可聚焦
• 确认DOM已加载完成
• 检查事件绑定代码是否执行

问题2：多次触发

解决方案：

• 使用.off()先解绑再绑定
• 使用命名空间管理事件

性能优化

对于大量表单元素：

// 不好的做法
$("input").focus(fn).blur(fn);

// 更好的做法
$(document).on("focus blur", "input", function(e){
  if(e.type === "focus") {
    // focus处理
  } else {
    // blur处理
  }
});

浏览器兼容性

jQuery的focus()/blur()方法已经处理了以下兼容性问题：

• IE8及以下版本的特殊行为
• 移动端浏览器的触摸事件
• 不同浏览器间的细微差异

替代方法

除了focus()/blur()，还可以考虑：

• focusin()/focusout()（支持冒泡）
• 原生JS的addEventListener
• 现代框架中的v-model等双向绑定

实际案例

搜索框提示

$("#search").focus(function(){
  if($(this).val() === "请输入关键词") {
    $(this).val("");
  }
}).blur(function(){
  if($(this).val() === "") {
    $(this).val("请输入关键词");
  }
});

表单自动跳转

$(".code-input").keyup(function(){
  if($(this).val().length === $(this).attr("maxlength")) {
    $(this).next().focus();
  }
}).blur(function(){
  if($(this).val().length < $(this).attr("maxlength")) {
    $(this).focus();
  }
});

总结

j