jquery失去焦点事件

写表单验证的失去事件时候，blur事件用得太顺手了。焦点用户点一下输入框，失去事件再点别处，焦点blur就触发——校验手机号、失去事件检查邮箱格式、焦点判断密码强度，失去事件全在这一下完成。焦点比keyup省事，失去事件用户没输完不会一直报错。焦点但用多了也踩坑，失去事件比如下面这段代码：

$('#username').on('blur',焦点 function() {  var val = $(this).val(); if (val === '') {  $(this).addClass('error'); $('#tip').text('用户名不能为空'); } });

看起来没问题。用户点空白处，失去事件输入框变红，焦点提示文字出现。失去事件但有个细节：如果用户点的是提交按钮，blur先触发，然后click才执行。如果blur里做了异步校验，比如ajax查用户名是否重复，click可能在校验结果回来之前就把表单提交了。这个时间差够让后端收到脏数据。

blur和focusout的区别值得说一句。blur不冒泡，focusout冒泡。什么意思？给一个div绑定focusout，里面所有input失焦都能触发。blur不行，必须绑在input本身。有次做动态生成的表单，用事件委托绑blur，死活不生效，换focusout立马好了。jQuery的on方法支持委托，但blur不冒泡这个特性绕不过去。

$('#form').on('focusout', 'input', function() {  // 所有input失焦都会触发，包括动态添加的 checkField($(this)); });

还有一个容易忽略的点：页面卸载时blur不一定触发。用户直接关标签页，或者点浏览器地址栏，blur可能不执行。所以别把关键校验全押在blur上。我习惯在blur里做即时反馈，提交前再统一跑一遍完整校验。两套逻辑，各管各的。

移动端又是另一回事。iOS上点输入框弹出键盘，再点“完成”按钮，blur触发时机和安卓不太一样。有些安卓机点键盘上的收起按钮，blur根本不触发，得监听resize或者用visibilitychange兜底。做H5表单那阵子，光处理这个失焦时机就写了好几版补丁。

jQuery里还有个trigger('blur')的用法。手动触发失焦事件，比如表单重置后想清掉错误提示。但注意：trigger('blur')不会真的让元素失去焦点，只是执行绑定的回调。真要移焦点得用document.activeElement.blur()或者$(el).blur()——后者在jQuery里是触发事件，不是移焦点。这个命名坑过不少人。

// 手动执行校验逻辑，但焦点还在 $('#email').trigger('blur'); // 真正让元素失焦 $('#email')[0].blur();

实际项目里，我通常把blur校验和input实时校验结合。blur做完整校验，input做轻量提示。比如密码框，输入时只提示“长度不够”，blur时再检查“必须包含数字和字母”。这样用户不会每敲一个字符就被打断，失焦后又能得到准确反馈。

最后提一个反直觉的：给body绑click来检测点击外部关闭弹窗，不如用blur。弹窗里的输入框失焦，说明用户点到别处了，这时候关弹窗比监听全局click更准。当然得排除弹窗内部元素之间的焦点切换，加个setTimeout(0)把当前事件循环排干净再判断。

blur事件不复杂，但边界情况多。写的时候多想一步：用户可能怎么离开这个输入框？点按钮、按Tab、切窗口、关页面——每种路径下blur的行为都不一样。把这些理清楚，代码才稳。