jQuery输入框事件处理中focus()与blur()链式调用执行时机的疑问

这是个非常典型的对jQuery事件绑定和链式调用的误解，我来帮你理清楚其中的逻辑：

首先要明确两个核心概念：

• 链式调用的本质：jQuery的大多数方法（包括事件绑定方法）都会返回调用它的jQuery对象，所以你可以一直链式写下去。但这只是简化了重复选择元素的代码，不等于后面的方法会立刻执行前面方法回调之后的逻辑。
• 事件绑定 vs 事件触发：你代码里的.focus(function(){...})和.blur(function(){...})都是事件绑定操作——它们只是在告诉浏览器：“当这个input发生focus/blur事件的时候，执行我传进去的这个函数”，而不是立刻执行函数本身。

回到你的代码：

$("input").focus(function(){ $(this).css("background-color", "blue"); }).blur(function(){ $(this).css("background-color", "red"); });

这段代码在执行时，实际完成的是两件独立的注册工作：

1. 为input元素注册focus事件处理器：当input获得焦点时，把背景色改成蓝色
2. 为同一个input元素注册blur事件处理器：当input失去焦点时，把背景色改成红色

整个过程只是完成了“事件监听的设置”，并没有触发任何事件。只有当用户和页面交互（比如点击input触发focus，再点击页面其他地方触发blur）时，对应的处理器函数才会被执行。

如果你的需求是在focus事件触发后立刻执行blur的逻辑，那你需要在focus的回调里主动触发blur事件或者直接执行对应代码，比如：

$("input")
  .focus(function(){ 
    $(this).css("background-color", "blue");
    // 主动触发blur事件，会执行绑定的blur回调
    $(this).blur(); 
  })
  .blur(function(){ 
    $(this).css("background-color", "red"); 
  });

这样当input获得焦点时，会先变蓝，然后立刻触发blur事件，进而执行变红的逻辑。

内容的提问来源于stack exchange，提问作者RMH